JS의 브라우저 호환성 문제

亚连원래의: 2018-06-12 14:19:231391검색

이 글에서는 JS의 모든 브라우저와 호환되는 DOMContentLoaded 이벤트에 대한 관련 정보를 주로 소개합니다. 표준 브라우저에서는 DOMContentLoaded 이벤트를 사용하여 요구 사항을 충족할 수 있습니다. 이벤트 처리 기능을 등록하는 것도 매우 간단합니다. 관심 있는 분들은 함께 배워보세요

JavaScript를 사용하여 dom 요소를 조작할 때 dom 요소를 얻는 코드는 일반적으로 window.onload=function(){}事件处理函数中，但window.onload事件在某些开始后可能会影响客户体验，因为要等待所有的脚本，css代码和图片等内容加载完毕才会触发此事件，尤其是如果图片量很大的情况下，会严重客户体验。所以很多时候，只需要DOM结构加载完毕即可，jQuery的$(document).ready(function(){})에 배치되어 이 기능을 구현합니다. 다음은 기본 JavaScript에서 이 기능을 구현하는 방법에 대한 소개입니다.

구현 프로세스 소개:

표준 브라우저에서는 DOMContentLoaded 이벤트를 사용하여 요구 사항을 충족할 수 있으며 이벤트 처리 기능을 등록하는 것도 매우 간단합니다.

코드는 다음과 같습니다.

addEventListener(‘DOMContentLoaded&#39;,fn,false)

단, IE8과 IE8 이하 브라우저에서는 DOMContentLoaded 이벤트를 지원하지 않으므로 이 문제를 해결하려면 다른 방법이 필요합니다.

많은 친구들은 document.onreadystatechange 이벤트의 document.readyState 상태가 완료인지 여부를 사용하여 DOM 구조가 로드되었는지 확인하는 데 사용된다고 생각할 수 있습니다. 그러나 테스트 후에 페이지가 사용되는 경우 작업을 완료할 수 없습니다. iframe에서 하위 페이지를 도입하면 문제가 발생합니다.

해결 방법은 다음과 같습니다.

DoScroll 하위 버전의 IE 브라우저에 고유한 메서드입니다. dom 구조가 로드되지 않은 경우 이 메서드를 호출하면 오류가 발생하므로 이를 통해 계속해서 이 메서드를 호출할 수 있습니다. 타이머 기능과 결합하여 판단 기능을 구현합니다. 코드는 다음과 같습니다.

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(&#39;DOMContentLoaded&#39;,execFn,false);
  }
  else if(window.attachEvent){
   doScroll();
  };
};
function doScroll(){
 try{
  document.documentElement.doScroll(&#39;left&#39;);
 }
 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. 코드 주석:

(1).eventQueue = [], 실행할 함수 대기열에 대한 빈 배열을 선언합니다.

(2).isReady = false, 변수를 선언하고 초기값을 false로 할당하면 true인 경우 dom이 로드되었음을 의미합니다.

(3).isBind = false, 변수를 선언하고 초기값을 false로 할당하면 true인 경우 시간 처리 함수가 바인딩된다는 의미입니다.

(4).function domReady(fn){}, 이 함수는 fn 함수를 실행하기 전에 dom이 로드될 때까지 기다리는 기능을 구현합니다.

(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 이하인 경우 doScroll 메서드를 호출하여 이 효과를 얻습니다.

(13).function doScroll(){}, 이 함수는 타이머 함수를 사용하여 doScroll() 함수를 계속 호출할 수 있습니다. 오류가 보고되면 계속 호출하고, 그렇지 않으면 dom 구조가 로드되므로 관련이 있습니다. 실행 기능.

(14).function execFn(){}, 이 함수는 실행할 함수를 배열에서 꺼낸 후 실행하고 마지막으로 배열을 지울 수 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

JS의 브라우저 호환성 문제

관련 기사