onload에서 여러 기능을 실행합니다. onload에서 여러 기능 실행 페이지 로딩 기능을 호출하는 방법



페이지를 로드할 때 버튼 누르기 (4)

페이지가 로드될 때 함수를 실행하고 싶지만 .

에서 초기화하면 실행되는 스크립트가 있습니다. 예를 들면 다음과 같습니다.

함수 codeAddress() ( // 코드 )

그러나 나는 그것을 실행하지 않고 실행하고 싶고 예를 들어 다음과 같은 많은 것을 시도했습니다.

Window.onload = 코드주소;

하지만 작동하지 않습니다.

그러면 페이지 로드 시 어떻게 트리거합니까?

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() ( // 페이지 로드 후 실행하려는 코드 ) 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);)

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

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

Document.addEventListener("DOMContentLoaded", function() ( Alert("Ready!"); ), false);

window.onload = 코드주소; 작동해야 하며 전체 코드는 다음과 같습니다.

테스트 함수 codeAddress() ( Alert("ok"); ) window.onload = codeAddress;

테스트 함수 codeAddress() ( Alert("ok"); )

DOM이 로드될 때 실행할 여러 기능을 구성할 수 있는 domReady 스크립트를 살펴보세요. 이것은 기본적으로 Dom이 많은 인기 있는 JavaScript 라이브러리에서 수행할 준비가 되어 있는 것이지만, 가볍고 외부 스크립트 파일의 시작 부분에 채택하고 추가할 수 있습니다.

사용예

// domReady 스크립트에 대한 참조를 추가하거나 // 여기 앞에 스크립트 내용을 배치합니다. function codeAddress() ( ) domReady(codeAddress);

이미 JavaScript를 어느 정도 알고 있다면 onload라는 Load 이벤트 핸들러에 대해 들어보셨을 것입니다. 이 이벤트는 페이지가 로드될 때 직접 시작됩니다. 그리고 페이지가 로드될 때 일부 기능을 실행해야 하는 경우가 매우 많습니다. 하지만 여러 JavaScript 기능을 실행해야 한다면 어떻게 될까요? 실제로 이 질문은 사이트의 사용자 중 한 명이 질문한 것입니다. 따라서 이 기사에서는 onload에서 여러 기능을 시작하는 방법에 대해 쓰겠습니다.

해결책은 정말 간단합니다. 필요한 다른 모든 기능이 실행되는 기능을 실행하면 됩니다.



함수 a() (
비()
씨();
}
함수 b() (
Alert("b() 함수가 시작되었습니다.");
}
함수 c() (
Alert("c() 함수가 시작되었습니다.");
}



이 페이지를 열면(코드 이해를 단순화하기 위해 html 태그나 페이지 제목 및 인코딩과 같은 중요한 사항은 없습니다) b() 및 c가 어떻게 작동하는지 볼 수 있습니다. () 기능은 페이지가 로드될 때 작동합니다.

오늘 저는 Javascript를 배우기 시작하는 사람들 사이에서 자주 발생하는 문제 중 하나에 대해 이야기하고 싶습니다.

그들은 스크립트 자체보다 코드 하위에 있는 페이지의 HTML 요소와 상호 작용하려고 합니다. 따라서 스크립트는 이미 로드되었지만 상호 작용해야 하는 요소는 아직 로드되지 않았습니다. 이러한 이유로 아무것도 작동하지 않습니다.

Javascript 언어의 특징은 해당 코드가 소스 코드에 작성된 대로 한 줄씩 순차적으로 실행된다는 것입니다.

예는 다음과 같습니다.

제목 없는 문서

CSS 규칙(배경색:노란색)은 ID가 #block인 요소에는 적용되지 않습니다. 선

$("#block").css("배경색", "노란색");

HTML 라인이 로드되기 전에 실행됩니다:

전체 문서가 완전히 로드된 후에만 코드나 함수를 실행해야 한다면 어떻게 될까요?

저는 이를 수행할 수 있는 세 가지 방법에 대해 이야기하고 싶습니다.

1 방향. Jquery 라이브러리를 사용합니다.

제가 직접 사용하는 경우가 가장 많고 가장 간단하고 편리한 솔루션이지만 Jquery 라이브러리를 연결해야 합니다.

다음 방법을 사용하면 이전 코드가 어떻게 변환되는지 보여줍니다.

#block(너비:100px; 높이:100px; 테두리:1px 단색 #ccc;) $(document).ready (function())( $("#block").css("배경색", "노란색" ) ;)); 제목 없는 문서

방법 2. body 요소와 onload 속성을 사용합니다.

#block (너비:100px; 높이:100px; 테두리:1px 단색 #ccc;) function funonload() ( $("#block").css("Background-color", "yellow"); ) 제목 없는 문서

3방향. window 객체와 해당 onload 속성을 사용합니다.

#block (너비:100px; 높이:100px; 테두리:1px 단색 #ccc;) function funonload() ( $("#block").css("Background-color", "yellow"); ) window.onload = 재미로드; 제목 없는 문서

귀하의 상황에 가장 적합한 방법을 선택하고 실천하십시오.



 

다음 내용을 읽어보는 것이 도움이 될 수 있습니다.