jqueryは親ページメソッドを実行します-フロントエンドQ&A-php.cn

jqueryは親ページメソッドを実行します

WBOY

リリース： 2023-05-28 13:37:11

オリジナル

1142 人が閲覧しました

Web アプリケーションを開発する場合、親ページ内のメソッドを 1 つのページから実行する必要があることがよくあります。 jQuery は、この目標を簡単に達成するのに役立つ強力な JavaScript ライブラリです。

この記事では、jQuery を使用して親ページのメソッドを実行する方法を紹介します。以下、次のパートで詳しく説明します。

親ページで定義されたメソッド
子ページは親ページ参照を取得します
子ページは親ページのメソッドを呼び出します
親ページのメソッドを実行する別の方法
親ページで定義されたメソッド
親ページの JavaScript スクリプトでは、いくつかのメソッドを定義できます。子ページ転送で期待されます。これらのメソッドは、ビジネスロジックの処理や Web ページ要素の更新など、あらゆるタイプのメソッドにすることができます。ここでは、簡単な例を示します。

<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() メソッドを呼び出します。

概要

Web アプリケーションを開発するとき、子ページから親ページのメソッドを呼び出す必要があることがよくあります。 jQuery を使用すると、この目標を簡単に達成できます。この記事では、親ページから子ページで簡単にメソッドを呼び出すことができる 2 つの方法を紹介しました。

以上がjqueryは親ページメソッドを実行しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。