페이지가 로드되었을 때 기능을 실행하는 방법은 무엇입니까?
되었을 때 , 이 <body>붙이다
은 크크 the the the the the에서 하면 실행이 됩니다.<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 준비 기능이 있습니다.
네이티브 Javascript를 사용한다면 이것을 추천합니다.
document.addEventListener('DOMContentLoaded', function() {
alert("Ready!");
}, false);
JQuery 스타일로 Darin의 답변을 받아들인다.(사용자가 javascript를 요구한 것은 알고 있다.)
$(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);}
이것이 도움이 되기를 바랍니다:)
ready state 변경 시도
document.addEventListener('readystatechange', () => {
if (document.readyState == 'complete') codeAddress();
});
여기서 상태는 다음과 같습니다.
- loading - 문서 로드 중(스니펫으로 부팅되지 않음)
- interactive - 문서가 구문 분석되고 실행되기 전에 실행됩니다.
DOMContentLoaded - complete - 문서 및 리소스가 로드되고 실행되기 전에 실행됩니다.
window.onload
<script>
document.addEventListener("DOMContentLoaded", () => {
mydiv.innerHTML += `DOMContentLoaded (timestamp: ${Date.now()})</br>`;
});
window.onload = () => {
mydiv.innerHTML += `window.onload (timestamp: ${Date.now()}) </br>` ;
} ;
document.addEventListener('readystatechange', () => {
mydiv.innerHTML += `ReadyState: ${document.readyState} (timestamp: ${Date.now()})</br>`;
if (document.readyState == 'complete') codeAddress();
});
function codeAddress() {
mydiv.style.color = 'red';
}
</script>
<div id='mydiv'></div>DOM이 로드되었을 때 실행할 여러 기능을 설정할 수 있는 domReady 스크립트를 살펴봅니다.이것은 기본적으로 많은 인기 있는 JavaScript 라이브러리에서 Domino ready가 수행하는 작업이지만 가볍고 외부 스크립트 파일의 시작 부분에서 추가 및 실행할 수 있습니다.
사용 예
// add reference to domReady script or place
// contents of script before here
function codeAddress() {
}
domReady(codeAddress);
window.onload는 다음과 같이 동작합니다.
function codeAddress() {
document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;<!DOCTYPE html>
<html>
<head>
<title>learning java script</title>
<script src="custom.js"></script>
</head>
<body>
<p id="test"></p>
<li>abcd</li>
</body>
</html>페이지가 로드되는 즉시 기능이 실행됩니다.
(*your function goes here*)();
대체 방법:
document.onload = functionName();
window.onload = functionName();
다른 버전의 브라우저 간에 지원을 유지하는 가장 좋은 방법이라고 생각합니다.
if (window.addEventListener) {
window.addEventListener("load", myFunction, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", myFunction);
}
else {
window.onload = myFunction; //will override previously attached event listeners.
}
범용 크로스 브라우저 웹 페이지 로더
페이지가 로드된 후 함수를 로드하는 문제를 해결할 수 있는 JavaScript 페이지 로더를 작성했습니다.이 웹 페이지 로더는 99.9% 크로스 브라우저 호환성이 있으며 다른 게시물과는 달리 많은 버전의 브라우저(구 및 신)에서 작동합니다.Internet Explorer 3-11, 모든 Firefox 및 Chrome 브라우저, 초기 Opera, 모든 모바일 브라우저, Netscape 4 및 6 시리즈 등을 포함한 거의 모든 브라우저에서 페이지 로딩 지원을 포함합니다.
특정 브라우저의 가장 빠른 페이지 로드 이벤트 또는 상태 확인을 선택하고 JavaScript가 문서 개체 모델(DOM)을 안전하게 처리할 수 있음을 나타내는 텍스트 문자열을 반환합니다. 많은 레거시 브라우저에서 작동하지만 테스트합니다.JavaScript 함수 또는 라이브러리 호출을 아래의 "Start()" 메서드 안에 배치하여 스크립트가 웹 페이지 또는 DOM이 브라우저에 로드되었다고 말하는 즉시 트리거되도록 합니다.
참고로 다음 코드 중 하나를 입력할 것을 권장합니다.
- 에 html이 .
<script>에 로드됩니다.또는block은 페이지를 일시 - 된 외부 " " " " "
<script>태그 파일에는 페이지와 병렬로 조용히 로드되지만 다운로드가 완료되면 html 로드를 일시 중지하여 먼저 구문 분석 및 처리됩니다.
이러한 메서드를 사용하는 경우 스크립트는 렌더 블록을 많이 하지 않아야 합니다.이 스크립트는 웹 페이지 DOM이 처음 구축될 때 준비되어야 하며, 그 이후에는 준비되지 않아야 합니다. 특히 페이지 상태는 이미지, 비디오 및 JavaScript API가 다운로드될 때까지 지연될 수 있습니다.
// ======== AFTER PAGE LOADS CALL YOUR SCRIPTS HERE =========
function Start(status) {
// In most modern browsers the console should return:
// "Browser Loader : Document : DOMContentLoaded : interactive"
console.log(status);
// add your script calls here...
};
// ======== JAVASCRIPT PAGE LOADER =========
// Stokely Web Page loader, 2022
if (document.readyState) {
if (document.readyState === "complete" || document.readyState === "loaded") {
Start("Browser Loader : Document : readyState : complete");
} else {
if (window.addEventListener) {
// Never try and call 'DOMContentLoaded' unless the web page is still in an early loading state.
if (document.readyState === 'loading' || document.readyState === 'uninitialized') {
window.addEventListener('DOMContentLoaded', function () {
// Most modern browsers will have the DOM ready after this state.
if (document.readyState === "interactive") {
Start("Browser Loader : Document : DOMContentLoaded : interactive");
} else if (document.readyState === "complete" || document.readyState === "loaded") {
Start("Browser Loader : Document : DOMContentLoaded : complete");
} else {
Start("Browser Loader : Document : DOMContentLoaded : load");
}
}, false);
} else {
// FALLBACK LOADER : If the readyState is late or unknown, go ahead and try and wait for a full page load event. Note: This function below was required for Internet Explorer 9-10 to work because of non-support of some readyState values! IE 4-9 only supports a "readyState" of "complete".
if (document.readyState === 'complete' || document.readyState === "loaded") {
Start("Browser Loader : Document : readyState : complete");
} else {
window.addEventListener('load', function () {
Start('Browser Loader : Window : Event : load');
}, false);
}
}
// If 'addEventListener' is not be supported in the browser, try the 'onreadystate' event. Some browsers like IE have poor support for 'addEventListener'.
} else {
// Note: document.onreadystatechange may have limited support in some browsers.
if (document.onreadystatechange) {
document.onreadystatechange = function () {
if (document.readyState === "complete" || document.readyState === "loaded"){
Start("Browser Loader : Document : onreadystatechange : complete");
}
// OPTIONAL: Because several versions of Internet Explorer do not support "interactive" or get flagged poorly, avoid this call when possible.
//else if (document.readyState === "interactive") {
//Start("Browser Loader : Document : onreadystatechange : interactive");
//}
}
} else {
// Note: Some browsers like IE 3-8 may need this more traditional version of the loading script if they fail to support "addeventlistener" or "onreadystate". "window.load" is a very old and very reliable page loader you should always fall back on.
window.onload = function() {
Start("Browser Loader : Window : window.onload (2)");
};
}
}
}
} else {
// LEGACY FALLBACK LOADER. If 'document.readyState' is not supported, use 'window.load'. It has wide support in very old browsers as well as all modern ones. Browsers Firefox 1-3.5, early Mozilla, Opera < 10.1, old Safari, and some IE browsers do not fully support 'readyState' or its values. "window.load" is a very old and very reliable page loader you should always fall back on.
window.onload = function () {
Start("Browser Loader : Window : window.onload (1)");
};
};
주의: 웹 브라우저에서 이 스크립트를 실행할 때는 반드시 F12 키를 눌러 브라우저 도구 화면을 띄우고 콘솔 탭을 확인하여 결과를 확인하십시오.웹 페이지 로더가 트리거된 단계와 언제 'Start()' 스크립트를 호출했는지 알려줍니다.
대부분의 최신 브라우저(HTML5 또는 2010년 이후)에서는 HTML 마크업의 DOM 또는 Document Object Model이 렌더링되는 즉시 트리거되어야 하지만 나머지 웹 페이지 리소스, CSS, 이미지, 비디오 및 기타 파일은 아직 로드 중입니다.최신 브라우저에서는 보통 "인터랙티브"와 "완전"의 준비 상태 사이에 있으며 DOM이 구축되어 있지만 브라우저는 여전히 다른 리소스 파일을 다운로드하고 있습니다.이를 통해 JavaScript는 HTML 트리 또는 DOM에 매우 일찍 액세스하여 조작을 시작할 수 있습니다.
Internet Explorer v.3-8 또는 Netscape와 같은 오래된 브라우저는 고급 DOM 체크를 이해하지 못하기 때문에 JavaScript를 호출하기 전에 DOM 및 모든 페이지 리소스의 전체 또는 "완전" 로드가 필요합니다.
언급URL : https://stackoverflow.com/questions/4842590/how-to-run-a-function-when-the-page-is-loaded
'source' 카테고리의 다른 글
| JavaScript에서 Blob을 파일로 변환하는 방법 (0) | 2022.10.27 |
|---|---|
| 왜 JUnit을 테스트에 사용하는가? (0) | 2022.10.27 |
| SQL에서 날짜 간 평균 시간 계산 (0) | 2022.10.27 |
| 오류!: SQLSTATE[42000] [1226] 'max_user_connections' 리소스(현재 값: 30)가 1000으로 구성되어 있습니다. (0) | 2022.10.27 |
| jQuery를 사용하여 Ajax 요청 중단 (0) | 2022.10.27 |