Question

我尝试了多种方法，以便在完成原始屏幕上的处理之前按顺序显示多个模态对话框。提交表单后，模式对话将全部启动。它们应该按顺序打开，因为第一个模态具有第二个模态需要的信息，依此类推。我尝试过的所有方法（现在都在下面使用简化版本）在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>

第二种方法：

<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的回复，但这不是我的选择。任何想法将不胜感激。

谢谢！

Answer 1

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

点击“点击我”
期望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>

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

<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限制？使用多种方法以显示多个自定义模式对话框

1 个答案: