Safari限制?使用多种方法来显示多个自定义模式对话框

Safari limitation? Using multiple methods in order to show multiple custom modal dialogs

本文关键字：显示 自定义 对话框 模式 限制 Safari 方法      更新时间：2024-05-07

我尝试了多种方法，以便在原始屏幕上完成处理之前按顺序显示多个模态对话。模态对话都将在提交表格后开始。它们应该按顺序打开，因为第一个模态有第二个模态需要的信息，等等。我尝试过的所有方法（目前有下面的简化版本）在IE（以及Mozilla）中都能很好地工作，但当我试图在Safari中测试它们时，它们并没有按照我希望的方式工作。以下是我真正想要的简化/细化版本。我基本上想确保在警报响起之前加载test.html页面。在IE中，这与我预期的以下两种方法一样工作-在modalcontentdiv中加载页面，然后显示警报。在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的回复，但这不是我的选择。任何想法都将不胜感激。

谢谢！

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

  1. 点击"点击我"
  2. 预计modalcontentdiv的内容会发生更改
  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。

相关文章：