JavaScript 창 Onload 함수 호출

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript 창 Onload 함수 호출
Muhammad Muzammil Hussain 2023년1월30일
JavaScript JavaScript Window Onload Method
  1. HTML의 예제와 함께 window.onload 기능 사용
  2. 몇 단계로 주어진 HTML 코드 검사
  3. 동일한 결과를 보는 다른 방법
JavaScript 창 Onload 함수 호출

이 글은 자바스크립트에서 window.onload 메소드의 용도를 예시로 설명합니다. window.onload 함수는 브라우저의 페이지 로드가 완료되면 작업을 수행하기 위해 실행됩니다.

HTML의 예제와 함께 window.onload 기능 사용

window.onload 메소드는 페이지가 브라우저(모든 이미지, 스타일, 스크립트 및 CDN 포함)에 완전히 로드될 때 트리거됩니다. 여기에서 경고 상자를 표시하기 위해 자동 실행을 위해 window.onload 메소드를 사용하는 HTML 페이지 소스 코드의 예를 볼 수 있습니다.

<html>
<head>
<title>(Window.onload function in HTML)</title>
<script type="text/javascript">

function code(){
alert(" Alert inside code function Window.onload");
}

window.onload=code();
</script>

</head>
<body>

<h1> Graphic Designer Firm </h1>
    <p1> A craft of creating visual content to communicate messages.</p1>
</br> <img src = "Graphic-Design.png" height="500px" width="500px" >

</br> <hr width="800">
</body>
</html>

위의 HTML 페이지 소스에서 doctype html에서 JavaScript를 사용하는 <script type="text/javascript"> 태그를 볼 수 있습니다. 다음 단계에서 function code()는 <script> 태그 내부에 선언됩니다.

function code()는 window.onload라고 합니다. 웹 페이지가 이미지와 텍스트 콘텐츠로 완전히 로드될 때 기본 경고 대화 상자를 표시합니다.

몇 단계로 주어진 HTML 코드 검사

이 네 가지 쉬운 단계를 따라 window.onload 방법을 명확하게 이해하십시오.

  • 텍스트 문서를 만듭니다. 메모장이나 다른 텍스트 편집 도구를 사용할 수 있습니다.
  • 생성된 텍스트 파일에 주어진 코드를 붙여넣습니다.
  • 확장자가 .html인 텍스트 파일을 저장하고 기본 브라우저에서 엽니다.
  • 전체 페이지 로드 직후에 팝업되는 경고 상자를 볼 수 있습니다.

동일한 결과를 보는 다른 방법

본문 태그를 통해 대체 onload 이벤트를 사용하여 경고 메시지 결과를 얻을 수 있습니다. 다음은 자동 실행을 사용하여 경고 상자가 포함된 함수 코드를 호출하는 본문 태그의 예입니다.

<script type="text/javascript">

function code(){
alert(" Alert inside code function");
}
</script>

<body onLoad="code()";>

두 예제 모두 본문 태그의 onLoad와 window.onload는 페이지 로드 완료 후 명령문을 실행하는 동일한 기능을 가지고 있습니다.