[javascript] 페이지가로드 될 때 기능을 실행하는 방법은 무엇입니까?
페이지가로드 될 때 함수를 실행하고 싶지만 <body>
태그 에서 사용하고 싶지 않습니다 .
다음 <body>
과 같이 초기화하면 실행되는 스크립트가 있습니다 .
function codeAddress() {
// code
}
<body onLoad="codeAddress()">
그러나 나는 그것을없이 실행하고 싶어 <body onload="codeAddress()">
하며 많은 것을 시도했습니다. 예 :
window.onload = codeAddress;
그러나 작동하지 않습니다.
페이지가로드 될 때 어떻게 실행합니까?
답변
window.onload = codeAddress;
작동해야합니다- 여기 데모 와 전체 코드가 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function codeAddress() {
alert('ok');
}
window.onload = codeAddress;
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function codeAddress() {
alert('ok');
}
</script>
</head>
<body onload="codeAddress();">
</body>
</html>
답변
jQuery 또는 window.onload를 사용하는 대신 네이티브 JavaScript는 jQuery가 출시 된 이후로 몇 가지 훌륭한 기능을 채택했습니다. 모든 최신 브라우저에는 이제 jQuery 라이브러리를 사용하지 않고도 자체 DOM 준비 기능이 있습니다.
기본 자바 스크립트를 사용하는 경우이 방법을 권장합니다.
document.addEventListener('DOMContentLoaded', function() {
alert("Ready!");
}, false);
답변
Darin의 답변을 취했지만 jQuery 스타일. (사용자가 자바 스크립트를 요청한 것을 알고 있습니다).
$(document).ready ( function(){
alert('ok');
});
답변
대체 솔루션. 간결함과 코드 단순성을 위해 이것을 선호합니다.
(function () {
alert("I am here");
})();
이름이 지정되지 않은 익명 함수입니다. 여기서 일어나는 것은 함수가 함께 정의되고 실행된다는 것입니다. 페이지를로드하기 전에 또는 모든 HTML 요소가로드 된 직후에 실행 될지 여부에 따라 본문의 시작 또는 끝에 추가하십시오.
답변
window.onload = function() {
… 등은 큰 대답이 아닙니다.
이것은 효과가 있을지 모르지만 해당 이벤트에 이미 연결되어있는 다른 기능도 모두 중단합니다. 또는 다른 기능이 이벤트 후에 해당 이벤트에 연결되면 기능이 중단됩니다. 따라서 나중에 왜 작동하는 것이 더 이상 작동하지 않는지 알아 내기 위해 많은 시간을 소비 할 수 있습니다.
더 강력한 답변은 다음과 같습니다.
if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}
내가 사용하고있는 일부 코드는 저자에게 크레딧을 제공하기 위해 어디서 찾은지를 잊어 버렸습니다.
function my_function() {
// whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}
도움이 되었기를 바랍니다 🙂
답변
readystatechange를 시도하십시오
document.addEventListener('readystatechange', () => {
if (document.readyState == 'complete') codeAddress();
});
상태는 다음과 같습니다.
- 로드 중 -문서가로드 중입니다 (스 니펫에서 실행되지 않음)
- 대화식 -문서가 파싱되고 전에 실행됩니다
DOMContentLoaded
- complete- 문서와 리소스가로드되고 실행되기 전에
window.onload
답변
DOM이로드 될 때 실행할 여러 함수를 설정할 수 있는 domReady 스크립트 를 살펴보십시오 . 기본적으로 Dom에서 많은 인기있는 JavaScript 라이브러리에서 수행하는 작업이지만 가볍고 외부 스크립트 파일의 시작 부분에서 가져와 추가 할 수 있습니다.
사용법 예
// add reference to domReady script or place
// contents of script before here
function codeAddress() {
}
domReady(codeAddress);