创建js，onload触发callback的方法实现（兼容主流浏览器） JavaScriptonload兼容浏览器
程序员文章站
2022-06-09 12:42:27
...
之前在新浪博客上写了好几天的博客，一发表的时候内容全没了！愤怒啊！即使代码里有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>