ホームページ > 記事 > ウェブフロントエンド > HTMLサブページから親ページ要素を取得する方法
HTML サブページで親ページの要素を取得する方法。具体的なコード例が必要です。
Web ページの開発では、HTML サブページの要素を取得する必要がある場合があります。一部の操作またはデータ対話を実行するために、サブページ内の親ページ。この記事では、HTML サブページで親ページの要素を取得する方法と、具体的なコード例を紹介します。
1. JavaScript の window.parent オブジェクトの使用
HTML では、JavaScript の window.parent オブジェクトを使用して親ページの要素を取得できます。具体的な手順は次のとおりです。
varparentElement = window.parent.document.getElementById('parent-element-id');
// 操作または親ページの要素を使用します
上記のコードでは、最初に window.parent を使用して、親ページのドキュメント オブジェクトを取得し、document.getElementById を使用して親ページ内の指定された ID を持つ要素を取得します。親ページの要素を取得したら、それらを操作したり使用したりできます。
親ページの要素にIDを追加する、要素を取得するにはサブページで document.getElementById を使用すると便利です。
2. ページ間通信に PostMessage を使用する
window.parent オブジェクトの使用に加えて、ページ間通信にも PostMessage を使用して、子ページが親ページの要素データ。具体的な手順は次のとおりです。
PostMessage リスナーを親ページに追加します//メッセージイベントを聞く
window.addEventListener('message', function(event) {// 获取子页面发送的消息 var message = event.data; // 查找父页面的元素 var parentElement = document.getElementById('parent-element-id'); // 操作或使用父页面的元素 parentElement.innerHTML = message;
上記のコードでは、window.addEventListener を使用してメッセージ イベントをリッスンします。子ページが PostMessage を通じてメッセージを送信すると、親ページはメッセージ イベントを通じてリッスンし、子ページによって送信されたメッセージを取得できます。メッセージを取得したら、メッセージの内容に基づいて対応する操作を実行できます。
子ページで PostMessage を送信
//親ページにメッセージを送信
var message = "これは子ページからのメッセージです"; window.parent.postMessage(message, '親ページのURL') ;
> ;
上記のコードでは、親ページに送信されるメッセージが最初に定義され、次に window.parent.postMessage メソッドを使用してメッセージが親ページに送信されます。親ページ。 2 番目のパラメータは親ページの URL であることに注意してください。
以上がHTMLサブページから親ページ要素を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。