写一个加载远程js的函数,function loadJSFn(sucCb,failCb){}, 要考虑到低端浏览器的兼容性;
function loadJSFn(url, sucCb, failCb) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url + (url.indexOf('?') === -1 ? '?' : '&') + 'random=' + Math.random();
if (typeof sucCb === 'function') {
if (script.readyState){ // IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
sucCb();
}
};
} else { // Other browsers
script.onload = function() {
sucCb();
};
}
}
if (typeof failCb === 'function') {
script.onerror = function() {
failCb();
};
}
document.body.appendChild(script);
}
为了提高加载远程 JS 的函数的兼容性,你可以考虑以下几点:
- 使用 async 和 defer 属性
在创建 <script>
元素时,为了避免阻塞页面的渲染和响应,你可以添加 async
或 defer
属性。async
属性告诉浏览器可以异步加载该脚本,不会阻塞页面的加载和渲染;而 defer
属性告诉浏览器在 HTML 解析完成后再执行脚本,这样可以保证脚本在正确的上下文中运行,并且不会影响页面的渲染。
- 处理 onload 和 onerror 事件
除了使用 addEventListener 方法处理 load
和 error
事件外,你还可以使用 DOM 元素的 onload
和 onerror
属性来处理这些事件。这种方式更加兼容旧版浏览器。
- 将脚本插入到 body 中
有些浏览器或环境可能不支持将脚本插入到头部(head)中,因此你可以尝试将脚本插入到 body 中。