Question

在我的应用程序中，我为每个 1000ms 调用一个方法来检查文档readyState。以下是我正在使用的代码，

var success=setInterval(""CheckState()"",1000);

function CheckState(){

if($get('businessDownl').document.readyState=="interactive" || 
      $get('businessDownl').document.readyState=="complete"){
           alert("Great");
           clearInterval(success);
  } 
}

此代码在IE浏览器中运行良好。但在Firefox和Chrome浏览器中失败。我试过用 $get('businessDownl').readyState也是，它打印为未定义。有谁能告诉我如何在上面的场景中使用readyState for FF和chrome？

Answer 1

注意：为了能够访问iframe的文档，因此它是readyState，您需要访问iframe中的域名（无论使用哪个域名） jQuery的）。
有关详细信息，请查看here。

你可以使用iframe的contentWindow属性（不需要jQuery）来实现请注意，要访问iframe的document，您必须先将元素添加到DOM中（例如，使用window.document.appendChild()）。

示例代码：

var businessDownl = document.createElement('iframe');
document.body.appendChild(businessDownl);
...
var state = businessDownl.contentWindow.document.readyState;

另请参阅此 short demo [测试了最新版本的Firefox和Chrome。]

（请注意，因为iframe加载速度很快，有时你只会看到“已完成”，有时会“加载”和“已完成” - 有一次我甚至幸运地看到“未初始化”：D）。

Answer 2

如果您只想等到文档准备就绪，则无需继续检查 - 您可以收听此事件：

var whenReady = function(callback) {
  if (document.readyState === 'complete') callback(); // check not already loaded prior to this function being called
  else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback); // for standards compliant browsers (including IE 9+)
  else if (document.attachEvent) document.attachEvent('onreadystatechange', callback); // for IE 8
};

whenReady(alert('loaded'));

这种技术的唯一缺点是它只支持IE 8及更高版本。像JQuery这样的库提供了更好的遗留浏览器支持和更清晰的语法：

$(function() {
  // anything here will execute once the dom is ready
});

document.readyState无法在Firefox和Chrome中运行

2 个答案: