jquery는 상위 페이지 메소드를 실행합니다.-프런트엔드 Q&A-php.cn

jquery는 상위 페이지 메소드를 실행합니다.

WBOY

풀어 주다： 2023-05-28 13:37:11

원래의

1097명이 탐색했습니다.

웹 애플리케이션을 개발하다 보면 한 페이지에서 상위 페이지의 메소드를 실행해야 하는 상황이 종종 발생합니다. jQuery는 이 목표를 쉽게 달성할 수 있도록 도와주는 강력한 JavaScript 라이브러리입니다.

이 글에서는 jQuery를 이용하여 상위 페이지 메소드를 실행하는 방법을 소개하겠습니다. 아래에서는 다음 부분에서 자세히 설명합니다.

상위 페이지에 정의된 메소드
하위 페이지가 상위 페이지 참조를 가져옵니다.
하위 페이지가 상위 페이지 메소드를 호출합니다.
다른 메소드가 상위 페이지를 실행합니다. method
상위 페이지의 메소드 정의
상위 페이지의 JavaScript 스크립트에서 하위 페이지에서 호출될 것으로 예상되는 일부 메소드를 정의할 수 있습니다. 이러한 메소드는 일부 비즈니스 로직을 처리하거나 일부 웹 페이지 요소를 업데이트하는 등 모든 유형의 메소드일 수 있습니다. 여기서는 간단한 예를 제시합니다.

<html>
   <head>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
     function displayMessage(){
         alert("Hello from parent page!");
     }
   </script>
   </head>
   <body>
      <a href="child.html" target="_blank">Open Child Page</a>
   </body>
</html>

로그인 후 복사

이 예에서는 대화 상자를 팝업하고 간단한 메시지를 표시하는 데 사용되는 "displayMessage()"라는 메서드를 정의합니다. 우리는 하위 페이지에서 이 메소드를 호출할 것입니다.

하위 페이지가 상위 페이지 참조를 가져옵니다
먼저 하위 페이지에서 상위 페이지에 대한 참조를 가져와야 합니다. window.parent 속성을 사용하면 이 작업을 수행할 수 있습니다.

$(document).ready(function(){
   var parentWindow = window.parent;
});

로그인 후 복사

이 예에서는 jQuery의 document.ready() 메서드를 사용합니다. 이 메서드는 실행되기 전에 전체 페이지가 로드될 때까지 기다립니다. 얻은 상위 페이지 참조를 parentWindow 변수에 저장합니다.

하위 페이지가 상위 페이지 메소드를 호출합니다
상위 페이지에 대한 참조를 얻은 후 상위 페이지에 정의된 메소드를 호출할 수 있습니다.

$(document).ready(function(){
   var parentWindow = window.parent;
   parentWindow.displayMessage();
});

로그인 후 복사

이 예에서는 상위 페이지에서 displayMessage를 호출합니다. 방법. 상위 창에 전달된 window.parent 속성에 액세스하여 상위 페이지에 대한 참조를 얻습니다. 그런 다음 이 참조를 사용하여 상위 페이지의 메서드를 호출합니다.

상위 페이지 메서드를 실행하는 또 다른 방법
상위 페이지에서 메서드를 실행하는 또 다른 방법도 있습니다. 하위 페이지에서 window.opener 속성을 사용할 수 있습니다. 이 속성은 현재 창을 연 창의 참조를 반환합니다. 창문. 창의 상위 창이 열려 있지 않으면 이 속성은 null을 반환합니다. 예는 다음과 같습니다.

상위 페이지에서:

<html>
  <head>
    <title>Parent Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      function displayMessage(){
        alert("Hello from parent page!")
      }
    </script>
  </head>
  <body>
     <button onclick="window.open('child.html','_blank')">Open Child Page</button>
  </body>
</html>

로그인 후 복사

하위 페이지에서:

$(document).ready(function(){
   var parentWindow = window.opener;
   parentWindow.displayMessage();
});

로그인 후 복사

이 예에서는 window.open() 메서드를 사용하여 child.html이라는 하위 페이지를 엽니다. 사용자가 상위 페이지의 버튼을 클릭하면 하위 페이지가 열리고 하위 페이지의 코드가 즉시 호출됩니다.

하위 페이지에서는 window.opener 속성을 사용하여 상위 창에 대한 참조를 얻습니다. 이 참조를 통해 상위 페이지의 모든 메서드나 속성에 액세스할 수 있습니다. 이 예에서는 상위 페이지 참조를 통해 상위 페이지에서 displayMessage() 메서드를 호출합니다.

요약

웹 애플리케이션을 개발할 때 하위 페이지에서 상위 페이지의 메서드를 호출해야 하는 경우가 많습니다. jQuery를 사용하면 이 목표를 쉽게 달성할 수 있습니다. 이번 글에서는 상위 페이지에서 하위 페이지의 메소드를 쉽게 호출할 수 있는 두 가지 메소드를 소개했습니다.

위 내용은 jquery는 상위 페이지 메소드를 실행합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!