Javascript 狩猎限制？使用多种方法以显示多个自定义模态对话框

我尝试了多种方法，以便在原始屏幕上完成处理之前按顺序显示多模态对话。在提交表单后，模态对话将全部启动。它们应该按顺序打开，因为第一个模态有第二个模态需要的信息，依此类推。我尝试过的所有方法（现在使用下面的简化版本）在IE（以及Mozilla）中都可以很好地工作，但是当我尝试在Safari中测试它们时，它们并没有按照我希望的方式工作。这是我真正想要的东西的简化/简化版本。我基本上希望确保在警报发出之前加载test.html页面。在IE中，它的工作方式与我对下面两种方法的预期相同——在modalcontent div中加载页面，然后显示警报。在firefox中，它首先显示警报，然后屏幕更改/重新加载。我尝试过使用javascript方法setInterval和setTimeout，但在firefox中，在屏幕刷新之前仍然会显示警报。你知道我是否遗漏了什么吗？我是不是完全错了

<TABLE><TR>
<TD ALIGN="center" bgcolor="red" onClick="showNonIEModal('test.html');
alert('alert to show up AFTER load');">CLICK ME</TD>
</TR></TABLE>

<div id="modalcontent"></div> 

点击我

Ajax方法：

<SCRIPT>function showNonIEModal(url)
{
var dsp;
var element = document.getElementById("modalcontent"); 
element.innerHTML = '<p><em>Loading ...</em></p>'; 
if (window.XMLHttpRequest){
    dsp=new XMLHttpRequest();
}
else{
    dsp=new ActiveXObject("Microsoft.XMLHTTP");
}

dsp.onreadystatechange=function(){
    if (dsp.readyState==4 && dsp.status==200){
        element.innerHTML=dsp.responseText;
    }
}
dsp.open("GET",url,true);
dsp.send();
}</SCRIPT>

函数showNonIEModal（url）
{
无功数字信号处理器；
var元素=document.getElementById（“modalcontent”）；
element.innerHTML='正在加载…
'；
if（window.XMLHttpRequest）{
dsp=新的XMLHttpRequest（）；
}
否则{
dsp=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
dsp.onreadystatechange=函数（）{
如果（dsp.readyState==4&&dsp.status==200）{
element.innerHTML=dsp.responseText；
}
}
打开（“GET”，url，true）；
send（）；
}

第二种方法：

<SCRIPT>function showNonIEModal(url)
{
var element = document.getElementById("modalcontent"); 
element.innerHTML='<'+'iframe id="'+frameName+'" name="'+frameName+'" src="'+url+'" 
FRAMEBORDER="0" height="500px" width= "600px"><\/iframe>';
}</SCRIPT>

函数showNonIEModal（url）
{
var元素=document.getElementById（“modalcontent”）；
element.innerHTML=''；
}

有什么想法吗？我在这个问题上花了无数个小时。这似乎是Safari的一个问题。在寻找答案的过程中，我发现了很多关于使用JQuery的回复，但这不是我的选择。如有任何想法，将不胜感激

---

谢谢

我对预期结果的确切顺序仍有点模糊，但我认为：

单击“单击我”

预计modalcontent div的内容将发生更改

保持警惕

如果这是正确的，那么问题就来了。在运行下一行代码之前，您需要依赖ajax请求（即非同步的请求）来完成。我知道IE是为你工作的，但IE没什么价值。您想要的可能更像这样：

<SCRIPT>function showNonIEModal(url, callback)
{
var dsp;
var element = document.getElementById("modalcontent"); 
element.innerHTML = '<p><em>Loading ...</em></p>'; 
if (window.XMLHttpRequest){
    dsp=new XMLHttpRequest();
}
else{
    dsp=new ActiveXObject("Microsoft.XMLHTTP");
}

dsp.onreadystatechange=function(){
    if (dsp.readyState==4 && dsp.status==200){
        element.innerHTML=dsp.responseText;
        callback && callback(); //This is the part I changed
    }
}
dsp.open("GET",url,true);
dsp.send();
}</SCRIPT>

函数showNonIEModal（url，回调） { 无功数字信号处理器； var元素=document.getElementById（“modalcontent”）； element.innerHTML='正在加载…

'； if（window.XMLHttpRequest）{ dsp=新的XMLHttpRequest（）； } 否则{ dsp=新的ActiveXObject（“Microsoft.XMLHTTP”）； } dsp.onreadystatechange=函数（）{ 如果（dsp.readyState==4&&dsp.status==200）{ element.innerHTML=dsp.responseText； callback&&callback（）；//这是我更改的部分 } } 打开（“GET”，url，true）； send（）； } 现在，当你想运行它时

<TABLE><TR>
<TD ALIGN="center" bgcolor="red" onClick="showNonIEModal('test.html', function () {alert('alert to show up AFTER load')});">CLICK ME</TD>
</TR></TABLE>

<div id="modalcontent"></div> 

点击我

---

这将强制该警报等待，直到从服务器接收并处理了内容。非常常见的异步模式-执行X，完成后运行此函数，该函数将继续执行Y和Z。

感谢您的响应，您正确理解了预期结果的顺序。不幸的是，我在safari中尝试了这一点，但没有成功，它仍然会加载警报，然后刷新页面。