HTMLサブページから親ページ要素を取得する方法

HTML サブページで親ページの要素を取得する方法。具体的なコード例が必要です。

Web ページの開発では、HTML サブページの要素を取得する必要がある場合があります。一部の操作またはデータ対話を実行するために、サブページ内の親ページ。この記事では、HTML サブページで親ページの要素を取得する方法と、具体的なコード例を紹介します。

1. JavaScript の window.parent オブジェクトの使用

HTML では、JavaScript の window.parent オブジェクトを使用して親ページの要素を取得できます。具体的な手順は次のとおりです。

#サブページに JavaScript コードを追加します
1. #サブページの HTML ファイルに、次の JavaScript コードを追加します:

// 親ページの要素を取得します

varparentElement = window.parent.document.getElementById('parent-element-id');

// 操作または親ページの要素を使用します

parentElement.innerHTML = "これは子ページからの変更です";

上記のコードでは、最初に window.parent を使用して、親ページのドキュメント オブジェクトを取得し、document.getElementById を使用して親ページ内の指定された ID を持つ要素を取得します。親ページの要素を取得したら、それらを操作したり使用したりできます。

親ページにidを追加する

2. 親ページのHTMLファイルでは、取得する要素にidを追加して取得できるようにする必要があります。子ページのIDで取得した要素を取得します。例:

親ページの要素コンテンツ

親ページの要素にIDを追加する、要素を取得するにはサブページで document.getElementById を使用すると便利です。

2. ページ間通信に PostMessage を使用する

window.parent オブジェクトの使用に加えて、ページ間通信にも PostMessage を使用して、子ページが親ページの要素データ。具体的な手順は次のとおりです。

PostMessage リスナーを親ページに追加します

1. 親ページの JavaScript コードに、次のコードを追加します。

//メッセージイベントを聞く

window.addEventListener('message', function(event) {

// 获取子页面发送的消息
var message = event.data;

// 查找父页面的元素
var parentElement = document.getElementById('parent-element-id');

// 操作或使用父页面的元素
parentElement.innerHTML = message;

});
> ;

上記のコードでは、window.addEventListener を使用してメッセージ イベントをリッスンします。子ページが PostMessage を通じてメッセージを送信すると、親ページはメッセージ イベントを通じてリッスンし、子ページによって送信されたメッセージを取得できます。メッセージを取得したら、メッセージの内容に基づいて対応する操作を実行できます。

子ページで PostMessage を送信

2. 子ページで、次のコードを使用して親ページにメッセージを送信します。

//親ページにメッセージを送信

var message = "これは子ページからのメッセージです";

window.parent.postMessage(message, '親ページのURL') ;
> ;

上記のコードでは、親ページに送信されるメッセージが最初に定義され、次に window.parent.postMessage メソッドを使用してメッセージが親ページに送信されます。親ページ。 2 番目のパラメータは親ページの URL であることに注意してください。

PostMessage を利用してページ間通信を行うことで、子ページはより柔軟に親ページの要素データを取得することができます。

概要:

この記事では、HTML サブページ内の親ページの要素を取得する方法を紹介し、具体的なコード例を示します。 JavaScript の window.parent オブジェクトを使用する場合でも、ページ間通信に PostMessage を使用する場合でも、子ページは親ページの要素データを取得できます。開発者は、実際のニーズに基づいて、適切な方法を選択して、対応する操作を実装できます。

以上がHTMLサブページから親ページ要素を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。