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

IT story

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

hot-time 2020. 4. 23. 08:02

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

페이지가로드 될 때 함수를 실행하고 싶지만 <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);}

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

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

사용법 예

// 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>

readystatechange를 시도하십시오

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

상태는 다음과 같습니다.

loading- 문서가로드 중입니다 (스 니펫에서 실행되지 않음)
대화식 -문서가 파싱되고 전에 해고 됨DOMContentLoaded
complete- 문서와 리소스가로드되고 실행되기 전에window.onload

<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += 'DOMContentLoaded' + '</br>';
  });
  
  window.onload = () => {
    mydiv.innerHTML += 'window.onload' + '</br>';
  } ;

  document.addEventListener('readystatechange', () => {
    mydiv.innerHTML += 'ReadyState: '+document.readyState + '</br>';
    
    if (document.readyState == 'complete') codeAddress();
  });

  function codeAddress() {
    mydiv.style.color = 'red';
  }
</script>

<div id='mydiv'></div>

본문이로드 될 때 함수를 실행하려는 경우 body 태그에 onload 속성을 제공하는 대신 이렇게 할 수 있습니다.

// define the body
var body = document.getElementsByTagName("body")[0];
    // or
    // var body = document.querySelector("body");
    // or 
    // var body = document.querySelectorAll("body")[0];
    
    
      function codeAddress() {
      // your function
        alert("Hello World");
    }
    
    body.onload = function() {
       codeAddress();
    };

<!DOCTYPE html>
<html>
<head>
	<title>learning java script</title> 
</head>
<body>
	<h1>Sample Heading</h1>
  <p>Sample text</p>
</body>
</html>

참고 URL : https://stackoverflow.com/questions/4842590/how-to-run-a-function-when-the-page-is-loaded

'IT story' 카테고리의 다른 글

Entity Framework 6을 사용하여 레코드를 업데이트하는 방법은 무엇입니까? (0)	2020.04.23
파이썬에서리스트를 특정 길이로 초기화 (0)	2020.04.23
SQL Server에 "LIKE"와 "IN"결합 (0)	2020.04.23
경고 :이 AsyncTask 클래스는 정적이거나 누수가 발생할 수 있습니다. (0)	2020.04.23
Visual Studio 2012에서 내 테스트를 찾지 못하는 이유는 무엇입니까? (0)	2020.04.23

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

hot-time

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

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

'IT story' 카테고리의 다른 글

'IT story'의 다른글

티스토리툴바

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

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

'IT story' 카테고리의 다른 글

'IT story'의 다른글

관련글

티스토리툴바