이 글에서는 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 상태가 완료인지 여부를 사용하여 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('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. 코드 주석:
(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(){}, 이 함수는 실행할 함수를 배열에서 꺼낸 후 실행하고 마지막으로 배열을 지울 수 있습니다.
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
WeChat 애플릿에서 슬라이더 사용 방법 component
에서 쿠키의 비밀번호를 기억하는 방법위 내용은 JS의 브라우저 호환성 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!