JS兼容所有浏览器的DOMContentLoaded事件怎么用-创新互联

小编给大家分享一下JS兼容所有浏览器的DOMContentLoaded事件怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

公司主营业务：网站制作、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出天津免费做网站回馈大家。

实现过程介绍:

标准浏览器中，使用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
代码实现了兼容所有浏览器的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(){}，此函数可以从数组中取出要执行的函数，然后执行，并最后将数组清空。
以上是“JS兼容所有浏览器的DOMContentLoaded事件怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
            


            网站标题：JS兼容所有浏览器的DOMContentLoaded事件怎么用-创新互联
            


            本文路径：http://mswzjz.cn/article/dijicg.html