无法替换onreadystate来加载

Unable to replace onreadystate to load

本文关键字：加载 onreadystate 替换      更新时间：2023-09-26

当我的文件在iframe中完成下载时，我隐藏了加载图标。它在ie浏览器中运行良好。在Chrome中，我无法让它等待直到文件在iframe中加载。

任何帮助都是感激的。

function checkIframeLoaded() {
    var iFrameObject = document.getElementById("iframehidden");
    var iframeDoc = iFrameObject.contentDocument || iFrameObject.contentWindow.document;
    if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == "interactive" || iframeDoc.readyState == "loaded") {
        if (top.document.getElementById("tblPleaseWait") != null) {
            top.document.getElementById("tblPleaseWait").style.display = "none";
        }
        else if (document.getElementById("tblPleaseWait") != null) {
            document.getElementById("tblPleaseWait").style.display = "none";
        }
        return;
    }
}
function setupLoader(objIFrame, brestorepane) {
    if (objIFrame.attachEvent) {
        if (brestorepane) {
            objIFrame.attachEvent('onreadystatechange', checkIframeLoaded);
        }
    } else {
        if (brestorepane) {
            objIFrame.addEventListener('load', checkIframeLoaded()); 
        }
    }
}

您在非ie浏览器中设置的处理程序不正确。

首先，有一个错别字。addEventListner应为addEventListener。您的JavaScript控制台可能已经提到了这一点。

之后，您将立即调用 checkIframeLoaded()，而不是将其作为处理程序引用。

试题:

objIFrame.addEventListener('load', checkIframeLoaded);

如果iframe src指向您自己网站上的内容，并且您已经正确设置了allow-same-origin，那么您可以使用此方法(您使用jQuery标记问题，因此此解决方案使用jQuery，但纯JS替代方案也是可能的)

function checkIframeLoaded() {
  if (top.document.getElementById("tblPleaseWait") != null) {
    top.document.getElementById("tblPleaseWait").style.display = "none";
  } else if (document.getElementById("tblPleaseWait") != null) {
    document.getElementById("tblPleaseWait").style.display = "none";
  }
}
$("#iframehidden").on("load", checkIframeLoaded);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='tblPleaseWait'>PLEASE WAIT</div>
<iframe id='iframehidden' name='iframehidden' src='http://stacksnippets.net' style='border:2px solid #ccc;'></iframe>

另一种方法是将代码放入iframe文档本身(例如iframe.html): 
$(window).on("load", function()
{
   var plsWait = top.document.getElementById("tblPleaseWait");
   if(plsWait) plsWait.style.display = "none";
});

如果iframe src在别人的网站上，那么你就有麻烦了。除非远程内容已设置为允许跨站点脚本。

同时，正如Paul Roub指出的，这里有一个错误:

objIFrame.addEventListener('load', checkIframeLoaded());

您实际上没有将checkIframeLoaded函数委托给load事件;您正在使用括号()执行该函数，而不是委托其结果undefined。

只要去掉括号就可以达到想要的效果，即在触发load事件时调用checkIframeLoaded:

objIFrame.addEventListener('load', checkIframeLoaded);

之后，你只需要在跨框架的脚本约束下工作。

function checkIframeLoaded() {
  if (top.document.getElementById("tblPleaseWait") != null) {
    top.document.getElementById("tblPleaseWait").style.display = "none";
  } else if (document.getElementById("tblPleaseWait") != null) {
    document.getElementById("tblPleaseWait").style.display = "none";
  }
}
$("#iframehidden").on("load", checkIframeLoaded);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='tblPleaseWait'>PLEASE WAIT</div>
<iframe id='iframehidden' name='iframehidden' src='http://stacksnippets.net' style='border:2px solid #ccc;'></iframe>

相关文章：