zoukankan      html  css  js  c++  java
  • onreadystatechange和onload区别分析以及如何判断script是否加载状态

    script加载

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

    FireFox,Opera, Chorme, IE11+ 和Safari3+的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已经加载完成.

    【Firefox, Opera, Chorme, IE11+ 和Safari3+会在<script>节点接收完成之后发出一个load 事件。你可以监听这一事件,以得到脚本准备好的通知】

    【Internet Explorer(IE10及以下版本)支持另一种实现方式,它发出一个readystatechange事件。<script>元素有一个readyState属性,它的值随着下载外部文件的过程而改变。readyState 有五种取值】

    微软文档上说,在<script>元素的生命周期中,readyState 的这些取值不一定全部出现,但并没有指出哪些取值总会被用到。实践中,我们最感兴趣的是“loaded”和“complete”状态。Internet Explorer 对这两个readyState值所表示的最终状态并不一致,有时<script>元素会得到“loaded”却从不出现“complete”,但另外一些情况下出现“complete”而用不到“loaded”。最安全的办法就是在readystatechange 事件中检查这两种状态,并且当其中一种状态出现时,删除readystatechange事件句柄(保证事件不会被处理两次)

    var script = document.createElement("script")
    script.type = "text/javascript";
    //Internet Explorer
    script.onreadystatechange = function(){
        if (script.readyState == "loaded" || script.readyState == "complete"){
            script.onreadystatechange = null;
            alert("Script loaded.");
        }
    };
    script.src = "file1.js";
    document.getElementsByTagName_r("head")[0].appendChild(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');
        }
    
    };

    上面是根据dom加载完去判断,如果根据dom未加载完去判断如下:

    var script = document.createElement('script');
    script.src="xx.js";
    script.onload = script.onreadystatechange = function(){
        if( this.readyState && this.readyState=='loading' ){
             return
        }
      alert('loaded'
    };

    大多数情况下,你希望调用一个函数就可以实现JavaScript 文件的动态加载。下面的函数封装了标准实现和IE 实现所需的功能:

    function loadScript(url, callback){

        var script = document.createElement ("script")

        script.type = "text/javascript";

        if (script.readyState){ //IE

            script.onreadystatechange = function(){

                if (script.readyState == "loaded" || script.readyState == "complete"){

                    script.onreadystatechange = null; // 同时检查两种状态,只要有一种触发就删除事件处理器,避免触发两次

                    callback();

                }

            };

        } else { //Others

            script.onload = function(){

                callback();

            };

        }

        script.src = url;

        document.getElementsByTagName_r("head")[0].appendChild(script);

    }

    以下 HTML 标签支持 onload :

    <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>(仅IE), <script>, <style>

     

     

  • 相关阅读:
    正则表达式中/i,/g,/ig,/gi,/m的区别和含义
    Git 使用中显示“Another git process seems to be running in this repository...”问题解决
    MySQL数据库中varchar与char类型的区别
    上传本地代码到gitHub过程详解
    PHP实现四种基本排序算法
    最优秀的5个Linux文本编辑器 狼人:
    11款有用的Web开发在线工具 狼人:
    Java.net网站新改版上线 狼人:
    WebMatrix进阶教程(3):如何实现某种样式 狼人:
    新界面新功能Firefox 4.0 RC重磅登场 狼人:
  • 原文地址:https://www.cnblogs.com/kunmomo/p/11912742.html
Copyright © 2011-2022 走看看