[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

코드 스 니펫 표시

<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 스크립트 를 살펴보십시오 . 기본적으로 Dom에서 많은 인기있는 JavaScript 라이브러리에서 수행하는 작업이지만 가볍고 외부 스크립트 파일의 시작 부분에서 가져와 추가 할 수 있습니다.

사용법 예

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

function codeAddress() {

}

domReady(codeAddress);