0

我尝试了多种方法，以便在原始屏幕上完成处理之前按顺序显示多个模态对话。提交表单后，模态对话将全部启动。它们应该按顺序打开，因为第一个模式具有第二个模式需要的信息，依此类推。我尝试过的所有方法（现在使用下面的简化版本）在 IE 中（以及在 Mozilla 中）都可以正常工作，但是当我尝试在 Safari 中测试它们时，它们并没有按照我想要的方式工作。这真的是我真正想要的简化/简化版本。我基本上想确保在警报响起之前加载 test.html 页面。在 IE 中，这与我对以下两种方法的预期方式相同 - 在 modalcontent div 中加载页面，然后显示警报。在火狐中，它首先显示警报，然后屏幕更改/重新加载。我尝试过使用 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>

阿贾克斯方法：

<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>

第二种方法：

<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>

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

谢谢！

4

1 回答 1

0

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

  1. 点击“点击我”
  2. 期望modalcontent div的内容发生变化
  3. 显示警报。

如果这是正确的，这就是问题所在（我认为）。在运行下一行代码之前，您依赖 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>

现在，当你想运行它时..

<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。

于 2012-07-30T16:43:49.157 回答