페이지가로드 될 때 기능을 실행하는 방법은 무엇입니까?

246

페이지가로드 될 때 함수를 실행하고 싶지만 <body>태그 에서 사용하고 싶지 않습니다 .

다음 <body>과 같이 초기화하면 실행되는 스크립트가 있습니다 .

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

그러나 나는 그것을없이 실행하고 싶어 <body onload="codeAddress()">하며 많은 것을 시도했습니다. 예 :

window.onload = codeAddress;

그러나 작동하지 않습니다.

페이지가로드 될 때 어떻게 실행합니까?

javascript html onload

— 클라우스 구스타프손
소스

정의 된 window.onload = codeAddress이후 codeAddress()에 실행 중 입니까? 그렇다면 이것이 작동합니다. 다른 곳에 오류가 없습니까?

— Skilldrick

이것은 말이되지 않습니다. window.onload는 페이지로드 후 실행되며 모든 javascript를 사용할 수 있으므로 codeAddress () 함수는 페이지 또는 링크 된 js 파일 내 어디에서나 선언 될 수 있습니다. 페이지를로드하는 동안 호출되지 않는 한 미리 올 필요는 없습니다.

— Jared Farrish

@Jared 예 그렇습니다. jsfiddle.net/HZHmc를 살펴 보십시오 . 작동하지 않습니다. 그러나 jsfiddle.net/HZHmc/1 정의 후에 window.onload를 이동하면 작동합니다.

— Skilldrick

함수 선언은 일반적으로 스코프의 상단에 올라가므로 액세스 가능한 범위의 어느 곳에서나 함수를 선언 할 수 있습니다.

— Russ Cam

4

모든 인기있는 브라우저는 자바 스크립트 오류를 표시 할 수 있습니다-어떤 것이 있습니까?

— Christoph

354

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>

스 니펫 확장

— 다린 디미트로프
소스

3

내 대답에서 말했듯이 코드에 아무런 문제가 없습니다. 작동하지 않는 이유는 JS의 어딘가에 오류가 있어야합니다.

— Skilldrick

본문에 텍스트가있는 단락을 넣으면 확인을 클릭 할 때까지 단락이로드되지 않습니다.

— FluorescentGreen5

이 글로벌 이벤트 핸들러는 Chrome에서만 사용할 수 있습니다. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…

— 추가됨

177

jQuery 또는 window.onload를 사용하는 대신 네이티브 JavaScript는 jQuery가 출시 된 이후로 몇 가지 훌륭한 기능을 채택했습니다. 모든 최신 브라우저에는 이제 jQuery 라이브러리를 사용하지 않고도 자체 DOM 준비 기능이 있습니다.

기본 자바 스크립트를 사용하는 경우이 방법을 권장합니다.

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);

— 스펜서 메이
소스

4

(멍청한 질문 : 무엇을 false합니까?)

— ᔕᖺᘎᕊ

7

'bubbles'속성에 대한 @ ᔕᖺᘎᕊ (포함하지 않아도 좋은 습관을 위해 모든 부울을 채울 수 있습니다). '취소 가능'특성에 대한 다른 부울 명령문도 있지만 위의 명령문이 이미 취소 할 수 없기 때문에 그다지 유용하지 않습니다. 여기에 대한 자세한 읽기 : developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— 스펜서 월

1

이것은 내가 지금 찾던 것입니다 :) DOM이 완료되면 실행되므로 브라우저에 "페이지가 완전히로드되었습니다"라고 표시 될 때가 아니라 외부 요소 (예 : 광고)에 따라 몇 초가 걸릴 수 있습니다.

— Nathanyel

약간 멍청한 질문, 페이지가로드되었는지 여부를 모르는 경우 어떻게해야합니까? 편집 : Ah : document.readyState

— Brian Hannay

1

@ x-yuri "스타일 시트, 이미지 및 서브 프레임이로드를 완료 할 때까지 기다리지 않고 문서가 완전히로드되고 구문 분석되면 DOMContentLoaded 이벤트가 시작됩니다 (로드 이벤트를 사용하여 완전히로드 된 페이지를 감지 할 수 있음)." - stackoverflow.com/questions/2414750/...

— 스펜서 월

46

Darin의 답변을 취했지만 jQuery 스타일. (사용자가 자바 스크립트를 요청한 것을 알고 있습니다).

바이올린을 실행

$(document).ready ( function(){
   alert('ok');
});

— Joes에서 먹는다
소스

4

귀하의 답변은 나에게 할당량을 가르쳐 주었지만 jQuery / javascript는 아닙니다.

— unicorn2

2

@VijayKumar 이것은 네이티브 자바 스크립트가 아닌 jQuery이므로 작동하려면 포함 된 jQuery 라이브러리가 필요합니다

— Spencer May

30

대체 솔루션. 간결함과 코드 단순성을 위해 이것을 선호합니다.

(function () {
    alert("I am here");
})();

이름이 지정되지 않은 익명 함수입니다. 여기서 일어나는 것은 함수가 함께 정의되고 실행된다는 것입니다. 페이지를로드하기 전에 또는 모든 HTML 요소가로드 된 직후에 실행 될지 여부에 따라 본문의 시작 또는 끝에 추가하십시오.

— 하비브
소스

1

이 코드는 GitHub 용 HTML 미리보기와 함께 작동하는 유일한 코드입니다. htmlpreview.github.io 다른 코드는이 HTML 미리보기에 의해 손상 됩니다.

— Jason Doucette

1

누군가 HTML 페이지 끝에 스크립트 태그를 넣는 것과 익명 함수의 목적과 다른 점을 설명 할 수 있습니까?

— Pat-Laugh

10

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);}

도움이 되었기를 바랍니다 :)

— 의지
소스

onload사용법 에 대한 추가 통찰력을 제공해 주셔서 감사 합니다

— CybeX

4

readystatechange를 시도하십시오

document.addEventListener('readystatechange', () => {    
  if (document.readyState == 'complete') codeAddress();
});

상태는 다음과 같습니다.

로드 중 -문서가로드 중입니다 (스 니펫에서 실행되지 않음)
대화식 -문서가 파싱되고 전에 실행됩니다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>

스 니펫 확장

— 카밀 키에브 스키
소스

3

DOM이로드 될 때 실행할 여러 함수를 설정할 수 있는 domReady 스크립트 를 살펴보십시오 . 기본적으로 Dom에서 많은 인기있는 JavaScript 라이브러리에서 수행하는 작업이지만 가볍고 외부 스크립트 파일의 시작 부분에서 가져와 추가 할 수 있습니다.

사용법 예

// add reference to domReady script or place 
// contents of script before here

function codeAddress() {

}

domReady(codeAddress);

— 러스 캠
소스

0

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>

스 니펫 확장

— 루드라
소스