欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

创建js,onload触发callback的方法实现(兼容主流浏览器) JavaScriptonload兼容浏览器

程序员文章站 2022-06-09 12:42:27
...

创建js,onload触发callback的方法实现(兼容主流浏览器)
            
    
    
        JavaScriptonload兼容浏览器 之前在新浪博客上写了好几天的博客,一发表的时候内容全没了!愤怒啊!即使代码里有script标签,发表时候你好歹提示一下,取消发表或者所有内容给我复制到剪贴板啊!这用户体验真是差的要命!

转入正题:这里就不写仔细的测试兼容性的代码以及测试结果了,直接简述兼容问题,及解决方案,以及完整代码了!

兼容性问题:
    chrome等标准浏览器支持onload事件
    IE8、9等版本不支持onload事件,用onreadystatechange事件替代

    问题1:IE9等既支持onload事件,也支持onreadystatechange事件,所以回调方法有可能会被执行2次


兼容代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script type="text/javascript">
        /*
         * @param {string} src 要加载的js路径
         * @param {function} fnCallback 加载完成后执行的回调方法
         */
        function loadJs(src, fnCallback) {
            // 创建script标签对象
            var oScript = document.createElement('script');
            // 有fnCallback参数的时候,绑定onload 和 onreadystatechange事件
            if (fnCallback) {
                oScript.onload = oScript.onreadystatechange = function () {
                    // onload 和 onreadystatechange 事件执行同一个方法
                    if (
                        // 不支持 onreadystatechange 事件的浏览器---支持onload
                        !this.readyState
                        // IE某版本,
                        || this.readyState === "complete")
                    {
                        // 防止IE内存泄漏
                        oScript.onload = oScript.onreadystatechange = null;
                        // 回调执行
                        fnCallback();
                    }
                }
            }
            var oHead = document.getElementsByTagName('head')[0];
            oScript.type = 'text/javascript';
            oScript.src = 'testBlock.js';
            oHead.appendChild(oScript);
        }

        // 方法执行
        loadJs('testBlock.js', function () {alert('执行回调方法成功!');})
    </script>
</body>
</html>