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

程序员文章站 2022-03-03 20:14:13

...

创建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>

相关标签： JavaScript onload 兼容浏览器

上一篇： html页面加载时执行的方法

下一篇： DOMContentLoaded和onload