创建js，onload触发callback的方法实现（兼容主流浏览器）

最新推荐文章于 2021-09-04 10:08:51 发布

原创最新推荐文章于 2021-09-04 10:08:51 发布 · 665 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #onload #兼容 #浏览器 #ViewUI

本文详细介绍了如何使用JavaScript在不同浏览器中实现文件加载的兼容性，特别关注了IE浏览器与标准浏览器之间的差异，并提供了解决IE9等版本既支持onload事件也支持onreadystatechange事件导致的回调方法执行多次问题的代码解决方案。

之前在新浪博客上写了好几天的博客，一发表的时候内容全没了！愤怒啊！即使代码里有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>