페이지로드시 JavaScript 함수를 어떻게 호출합니까?

244

일반적으로 페이지가로드 된 후 JavaScript 함수를 호출하려면 onload약간의 JavaScript가 포함 된 본문에 속성을 추가합니다 (보통 함수 만 호출).

<body onload="foo()">

페이지가로드되면 JavaScript 코드를 실행하여 페이지의 일부를 서버의 데이터로 동적으로 채 웁니다. 속성을 추가 할 수있는 요소 onload가없는 JSP 조각을 사용하고 있으므로 속성을 사용할 수 없습니다 body.

로드시 JavaScript 함수를 호출하는 다른 방법이 있습니까? 익숙하지 않아서 jQuery를 사용하지 않을 것입니다.

javascript onload

— 팔라
소스

15

btw : 자바 스크립트입니다. Java는 언어이며 Javascript는 다른 언어입니다. Java 스크립트와 같은 것은 없습니다. 참고

— Yanick Rochon

귀하의 질문에 대한 Kevin의 수정 사항이 여전히 동일한 질문을하고 있는지 또는 당사가 이해하도록하기 위해 다시 표현할 수 있습니까? (onload의 대안을 찾고 있습니까?)

— STW

388

onload 메소드가 매개 변수를 사용하도록하려면 다음과 유사한 작업을 수행하십시오.

window.onload = function() {
  yourFunction(param1, param2);
};

이것은 onload를 익명 함수에 바인딩하며, 호출 될 때 원하는 매개 변수와 함께 원하는 함수를 실행합니다. 물론 익명 함수 내부에서 둘 이상의 함수를 실행할 수 있습니다.

— 맷 시커
소스

이제 서버 생성 페이지를 동적으로 포함하고 DOM 준비가 필요할 때이 지뢰밭을 살펴 봐야합니다. 누군가가 라이브러리 사용자를 더 일찍 장려했을 것입니다.

— Stefan Kendall

4

나는 그것이 좋은 생각이라고 말하지 않았다. 내가 일하는 수석 개발자는 Not Invented Here 증후군의 강력한 사례를 가지고 있지만 몇 페이지 밖에 jquery를 사용하도록 설득하지 못했습니다.

— Matt Sieker

2

그런 다음 작업을 전환해야합니다. 작업에 적합한 도구가 사용중인 도구가 아닌 경우 왜 무능한 사람과 계속 싸우면서 벽에 대고 머리를 때리는가?

— Stefan Kendall

onclick event on button을 사용하여 동일한 기능을 두 번째로 호출 할 수 있습니까?

— Faizan

73

이를 수행하는 또 다른 방법은 이벤트 리스너를 사용하는 것입니다.

document.addEventListener("DOMContentLoaded", function() {
  you_function(...);
});

설명:

DOMContentLoaded 문서의 DOM 객체가 JavaScript로 완전히로드되고 표시 될 때 "클릭", "포커스"일 수 있음을 의미합니다.

function () 이벤트가 발생하면 익명 함수가 호출됩니다.

— 아메드 졸라 니
소스

5

IE 8 이하에서는 작동하지 않습니다. 그렇지 않으면 이것은 최고의 순수 JS 솔루션입니다!

— Philipp

46

Kevin의 편집 / 해석이 정확하고 첫 번째 옵션이 적용되지 않는다고 가정하면 원래 질문은 명확하지 않습니다.

일반적인 옵션은 onload이벤트를 사용하는 것입니다 .

<body onload="javascript:SomeFunction()">
....

몸의 맨 끝에 자바 스크립트를 배치 할 수도 있습니다. 문서가 완료 될 때까지 실행이 시작되지 않습니다.

<body>
  ...
  <script type="text/javascript">
    SomeFunction();
  </script>
</body>

그리고 또 다른 옵션은 본질적으로 이것을 수행하는 JS 프레임 워크를 사용하는 것입니다.

// jQuery
$(document).ready( function () {
  SomeFunction();
});

— STW
소스

javascript:에서는 onload유해하지 불구하고, 필요하지 않습니다.

— icktoofay

@STW <script type="text/javascript">LoadResult();</script>제공Uncaught ReferenceError: LoadResult is not defined

— Gunasegar

37

function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

또는 원하는 경우 jQuery를 사용하십시오.

$(function(){
   yourfunction();
});

페이지로드시 둘 이상의 함수를 호출하려면 자세한 내용은이 기사를 참조하십시오.

여러 JavaScript Onload 함수 사용

— 사프 라즈
소스

3

이것은 정확하지 않습니다. 함수는 실행되어 onload에 반환되는 모든 것을 할당합니다. ()이 없어야합니다.

— epascarello

1

onload 이벤트를 수신하는 다른 기능이있는 경우이 기능이 사라집니다. 이벤트 핸들러를 직접 할당하는 대신 이벤트 리스너를 추가하는 것이 좋습니다. 이 경우에도 함수 클로저없이 'window.onload = yourfunction'으로 지정합니다. 당신의 방법은 할당시 function ()을 실행하려고합니다.

— Robusto

함수의 반환 값을 window.onload에 할당하면 반환 값이 함수가 아닌 한 작동하지 않습니다.

— I.devries

@epascarello : 잘 잡히고, 고쳤습니다. 함수 이름을 쓸 때 습관이 보입니다. 감사합니다

— Sarfraz

1

window.onload = 함수; 이 방법의 문제점은 fucntion 매개 변수를 받아들이지 않는다는 것입니다!

— palAlaa

8

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

스 니펫 확장

— 익명
소스

3

스크립트가 헤드 태그에 삽입되어 본문 내용보다 먼저 실행될 수 있음을 알 수 있듯이 그의 대답은 분명하다고 생각합니다. 전혀 알지 못하지만 누군가가 당신에게 숟가락을 먹이 거나이 지역 사회의 누군가가 당신에게 물건을 조금 더 찾아야하는 경우는 결코 아닙니다. # especially_that_you're_a_web_developer

— M03

8

로드 할 때 호출하려는 함수를 호출해야합니다 (예 : 문서 / 페이지로드). 예를 들어, 문서 또는 페이지를로드 할 때로드하려는 기능을 "yourFunction"이라고합니다. 문서의로드 이벤트시 함수를 호출하여 수행 할 수 있습니다. 자세한 내용은 아래 코드를 참조하십시오.

아래 코드를 사용해보십시오 :

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        yourFunction();
    });
    function yourFunction(){
      //some code
    }
</script>

— 아미르 Md 아 미루자
소스

6

다음은 트릭입니다 (모든 곳에서 작동).

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

— 아비 셰크
소스

1

DOM에 삽입 된로드 된 HTML (서버에서) MutationObserver감지 또는 데이터를 사용할 준비가되면 loadContent 함수에서 모멘트 감지

코드 스 니펫 표시

let ignoreFirstChange = 0;
let observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirstChange++ > 0) console.log('Element added on', new Date());
}
)).observe(content, {childList: true, subtree:true });


// TEST: simulate element loading
let tmp=1;
function loadContent(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadContent('Senna');
loadContent('Anna');
loadContent('John');

<div id="content"><div>

스 니펫 확장

— 카밀 키에브 스키
소스