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