js中 onreadystatechange 和 onload的区别

Posted 大熊

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中 onreadystatechange 和 onload的区别相关的知识,希望对你有一定的参考价值。

IE的script 元素只支持onreadystatechange事件,不支持onload事件。

FF的script 元素不支持onreadystatechange事件,只支持onload事件。

如果要在一个<script src="xx.js"> 加载完成执行一个操作,FF使用onload事件就行了,IE下则要结合onreadystatechange事件和this.readyState,
以下是IE的一个例子:

<script type="text/javascript" src="xx.xx" onreadstatechange="if(this.readyState==‘load‘) alert(‘loaded‘);"></script>

this.readyState的值为‘loaded‘或者‘complete‘都可以表示这个script已经加载完成.

如何结合IE和FF的区别?参考一下jquery的源码:

var script = document.createElement(‘script‘);

script.src="xx.js";

script.onload = script.onreadystatechange = function(){

     if(  ! this.readyState     //这是FF的判断语句,因为ff下没有readyState这人值,IE的readyState肯定有值

          || this.readyState==‘loaded‘ || this.readyState==‘complete‘   // 这是IE的判断语句

    ){

          alert(‘loaded‘);

    }

};


document文档正在加载时,返回"loading"。当文档结束渲染但在加载内嵌资源时,返回"interactive",并引发DOMContentLoaded事件。当文档加载完成时,返回"complete",并引发load事件。

readystatechange事件会在document对象上的readyState属性的属性值发生变化时触发.

语法

var string = document.readyState;

例子

// 模拟DOMContentLoaded
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}
// 模拟 load事件
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    initApplication();
  }
}
<iframe src="../../planmanage/planmanage/planBaseInfoAction.do?doType=212" width="98%" height="330" scrolling="no" frameborder="0" id="content51" name="content50" style="visibility: hidden;" onreadystatechange="stateChangeIE(this,‘loading50‘)" onload="stateChangeFirefox(this,‘loading50‘)"></iframe>   

以上是关于js中 onreadystatechange 和 onload的区别的主要内容,如果未能解决你的问题,请参考以下文章

无法让 vanilla JS onreadystatechange 函数/readyState 4 工作

onreadystatechange和onload区别分析

加载顺序 ready onload onreadystatechange

js报错:Ajax 中onreadystatechange在ie7及以上浏览器兼容吗,为什么没有反应?求大神

js数据加载完成的方法

Ajax中onload和onreadystatechange两种请求方式的区别