질문 : jQuery의 $ .ready ()와 동등한 순수 JavaScript-페이지 / DOM이 준비되었을 때 함수를 호출하는 방법
jQuery로 우리 모두는 멋진 .ready() 함수를 알고 있습니다.
$('document').ready(function(){});
그러나 라이브러리를 지원하지 않는 표준 JavaScript로 작성된 함수를 실행하고 페이지가 처리 할 준비가되는 즉시 함수를 시작하고 싶다고 가정 해 보겠습니다. 이에 접근하는 적절한 방법은 무엇입니까?
나는 내가 할 수 있다는 것을 안다.
window.onload="myFunction()";
body 태그를 사용할 수 있습니다.
<body onload="myFunction()">
또는 모든 작업 후에 페이지 하단에서 시도 할 수도 있지만 끝 body 또는 html 태그는 다음과 같습니다.
<script type="text/javascript">
myFunction();
</script>$.ready() 와 같은 방식으로 하나 이상의 함수를 발행하는 크로스 브라우저 (이전 / 신규) 호환 방법은 무엇입니까?
답변
브라우저 간 호환성을 모두 수행하는 프레임 워크가 없을 때 가장 간단한 방법은 본문 끝에 코드를 호출하는 것입니다. 이는 모든 이미지가로드되는 것이 아니라 DOM이 준비 될 때까지만 기다리기 때문에 onload 핸들러보다 실행이 더 빠릅니다. 그리고 이것은 모든 브라우저에서 작동합니다.
<!doctype html>
<html>
<head>
</head>
<body>
Your HTML here
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
})();
</script>
</body>
</html>최신 브라우저 (IE9 이상 및 모든 버전의 Chrome, Firefox 또는 Safari)의 경우 어디서나 호출 할 수있는 $(document).ready() 호출 스크립트가있는 위치), 다음과 같이 사용할 수 있습니다.
function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete" || document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}용법:
docReady(function() {
// DOM is loaded and ready for manipulation here
});완전한 크로스 브라우저 호환성 (이전 버전의 IE 포함)이 필요하고 window.onload $(document).ready() 메서드를 구현하는 방법을 살펴 봐야 할 것입니다. . 브라우저의 기능에 따라 상당히 관련됩니다.
jQuery가 무엇을하는지 (스크립트 태그가 어디에 있든 작동 할 것입니다) 약간의 아이디어를 제공합니다.
지원되는 경우 표준을 시도합니다.
document.addEventListener('DOMContentLoaded', fn, false);다음으로 대체 :
window.addEventListener('load', fn, false )또는 이전 버전의 IE의 경우 다음을 사용합니다.
document.attachEvent("onreadystatechange", fn);다음으로 대체 :
window.attachEvent("onload", fn);그리고 IE 코드 경로에는 내가 잘 따르지 않는 몇 가지 해결 방법이 있지만 프레임과 관련이있는 것처럼 보입니다.
다음은 일반 자바 스크립트로 작성된 .ready() 를 완전히 대체합니다.
(function(funcName, baseObj) {
// The public function name defaults to window.docReady
// but you can pass in your own object and own function name and those will be used
// if you want to put them in a different namespace
funcName = funcName || "docReady";
baseObj = baseObj || window;
var readyList = [];
var readyFired = false;
var readyEventHandlersInstalled = false;
// call this when the document is ready
// this function protects itself against being called more than once
function ready() {
if (!readyFired) {
// this must be set to true before we start calling callbacks
readyFired = true;
for (var i = 0; i < readyList.length; i++) {
// if a callback here happens to add new ready handlers,
// the docReady() function will see that it already fired
// and will schedule the callback to run right after
// this event loop finishes so all handlers will still execute
// in order and no new ones will be added to the readyList
// while we are processing the list
readyList[i].fn.call(window, readyList[i].ctx);
}
// allow any closures held by these functions to free
readyList = [];
}
}
function readyStateChange() {
if ( document.readyState === "complete" ) {
ready();
}
}
// This is the one public interface
// docReady(fn, context);
// the context argument is optional - if present, it will be passed
// as an argument to the callback
baseObj[funcName] = function(callback, context) {
if (typeof callback !== "function") {
throw new TypeError("callback for docReady(fn) must be a function");
}
// if ready has already fired, then just schedule the callback
// to fire asynchronously, but right away
if (readyFired) {
setTimeout(function() {callback(context);}, 1);
return;
} else {
// add the function and context to the list
readyList.push({fn: callback, ctx: context});
}
// if document already ready to go, schedule the ready function to run
if (document.readyState === "complete") {
setTimeout(ready, 1);
} else if (!readyEventHandlersInstalled) {
// otherwise if we don't have event handlers installed, install them
if (document.addEventListener) {
// first choice is DOMContentLoaded event
document.addEventListener("DOMContentLoaded", ready, false);
// backup is window load event
window.addEventListener("load", ready, false);
} else {
// must be IE
document.attachEvent("onreadystatechange", readyStateChange);
window.attachEvent("onload", ready);
}
readyEventHandlersInstalled = true;
}
}
})("docReady", window);코드의 최신 버전은 https://github.com/jfriend00/docReady의 GitHub에서 공개적으로 공유됩니다.
용법:
// pass a function reference
docReady(fn);
// use an anonymous function
docReady(function() {
// code here
});
// pass a function reference and a context
// the context will be passed to the function as the first argument
docReady(fn, context);
// use an anonymous function with a context
docReady(function(context) {
// code here that can use the context argument that was passed to docReady
}, ctx);이것은 다음에서 테스트되었습니다.
IE6 and up
Firefox 3.6 and up
Chrome 14 and up
Safari 5.1 and up
Opera 11.6 and up
Multiple iOS devices
Multiple Android devices작업 구현 및 테스트 베드 : http://jsfiddle.net/jfriend00/YfD3C/
작동 방식에 대한 요약은 다음과 같습니다.
docReady() 로 등록 된 핸들러는 등록 된 순서대로 실행됩니다.
docReady(fn) 를 호출 setTimeout(fn, 1) 사용하여 현재 실행 스레드가 완료되는 즉시 콜백이 실행되도록 예약됩니다. 이를 통해 호출 코드는 나중에 JS의 현재 스레드가 끝나고 호출 순서를 유지하자마자 나중에 호출되는 비동기 콜백이라고 항상 가정 할 수 있습니다.
출처 : https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t
'프로그래밍 언어 > jQuery, ajax' 카테고리의 다른 글
| jQuery 테이블 마지막 행에 행 추가하는 방법 (0) | 2021.09.07 |
|---|---|
| jQuery를 사용하는 이스케이프 키의 키 코드 (0) | 2021.09.03 |
| jQuery 지연 및 약속 - .then () vs .done () (0) | 2021.09.03 |
| select 박스의 모든 옵션을 제거한 다음 하나의 옵션을 추가하고 jQuery로 선택하는 방법 (0) | 2021.09.03 |
| jQuery로 페이지를 새로 고침 하는 방법 (0) | 2021.09.02 |