在JS中有关兼容浏览器问题
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了在JS中有关兼容浏览器问题，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3410字，纯文字阅读大概需要5分钟。
内容图文
这篇文章主要介绍了JS兼容所有浏览器的DOMContentLoaded事件的相关资料，标准浏览器中，使用DOMContentLoaded事件即可实现我们的要求，注册事件处理函数也极为简单，感兴趣的朋友一起学习吧使用JavaScript操作dom元素的时候，通常会将获取dom元素的代码放在window.onload=function(){}事件处理函数中，但window.onload事件在某些开始后可能会影响客户体验，因为要等待所有的脚本，css代码和图片等内容加载完毕才会触发此事件，尤其是如果图片量很大的情况下，会严重客户体验。所以很多时候，只需要DOM结构加载完毕即可，jQuery的$(document).ready(function(){})实现此功能，下面介绍一下原生JavaScript如何实现此功能。
实现过程介绍:
标准浏览器中，使用DOMContentLoaded事件即可实现我们的要求，注册事件处理函数也极为简单。
代码如下:
addEventListener(‘DOMContentLoaded',fn,false)
但IE8和IE8以下浏览器并不支持DOMContentLoaded事件，所以还需要另辟蹊径来解决此问题。
可能很多朋友认为根据document.onreadystatechange事件的document.readyState状态是否等于complete来判断dom结构是否加载完毕，但经过测试并不能完成任务，如果页面使用iframe引入子页面，会有问题。
解决方案如下：
低版本IE浏览器特有的doScroll方法，当dom结构没有加载完成时，调用此方法会报错，于是可以通过定时器函数不断的调用此方法，并结合try catch语句来实现判断功能，代码如下:
eventQueue = [];
isReady = false;
isBind = false;
function domReady(fn){
if(isReady){
fn.call(window);
}
else{
eventQueue.push(fn);
};
bindReady();
};
function bindReady(){
if(isReady) return;
if(isBind) return;
isBind=true;
if(window.addEventListener){
document.addEventListener('DOMContentLoaded',execFn,false);
}
else if(window.attachEvent){
doScroll();
};
};
function doScroll(){
try{
document.documentElement.doScroll('left');
}
catch(error){
return setTimeout(doScroll,20);
};
execFn();
};
function execFn(){
if(!isReady){
isReady=true;
for(var index=0;i<eventQueue.length;index++){
eventQueue[index].call(window);
};
eventQueue = [];
};
};
domReady(function(){
//code
});
domReady(function(){
//code
});代码实现了兼容所有浏览器的DOMContentLoaded效果，下面介绍一下它的实现过程。
一.代码注释:
（1）.eventQueue = []，声明一个空数组，用来要执行的函数队列。
（2）.isReady = false，声明一个变量并赋初值为false，如果为true则表示dom已经加载完毕。
（3）.isBind = false，声明一个变量并赋初值为false，如果为true，则表示时间处理函数绑定完毕。
（4）.function domReady(fn){}，此函数实现了等dom加载完毕再去执行fn函数的功能。
（5）.if(isReady){fn.call(window);}，如果变量值为true，则直接执行函数。
（6）.else{eventQueue.push(fn);}，将要执行的函数加入数组中。
（7）.bindReady()，此函数可以实现注册事件处理函数。
（8）.if(isReady) return，如果等于true，直接跳出函数，这个时候fn函数已经被执行。
（9）.if(isBind) return，如果已经注册的话，同样无需进行第二次。
（10）.isBind=true，将变量的值修改为true。
（11）.if(window.addEventListener){document.addEventListener('DOMContentLoaded',execFn,false);}，如果是标准浏览器则使用addEventListener注册事件处理函数。
（12）.else if(window.attachEvent){doScroll();}，如果IE8及IE8以下浏览器，调用doScroll方法实现此效果。
（13）.function doScroll(){}，此函数可以使用利用定时器函数不断的调用doScroll()函数，如果报错，则继续调用，否则的话，也就是dom结构加载完毕，于是就执行相关函数。
（14）.function execFn(){}，此函数可以从数组中取出要执行的函数，然后执行，并最后将数组清空。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在JavaScript中如何计算多边形质心
在微信小程序中如何使用switch开关选择器
详细解读Angular有关报错404问题
在微信小程序中如何使用slider组件
在vue中如何实现记住密码到cookie上
以上就是在JS中有关兼容浏览器问题的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的在JS中有关兼容浏览器问题全部内容，希望文章能够帮你解决在JS中有关兼容浏览器问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。