ホームページ > 記事 > ウェブフロントエンド > jqueryは親ページメソッドを実行します
jqueryは親ページメソッドを実行します
- WBOYオリジナル
- 2023-05-28 13:37:111046ブラウズ
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 サイトの他の関連記事を参照してください。