ホームページ > 記事 > ウェブフロントエンド > jqueryを使用して親ページ要素またはデータを取得するいくつかの方法の簡単な分析
jqueryを使用して親ページ要素またはデータを取得するいくつかの方法の簡単な分析
- PHPzオリジナル
- 2023-04-17 10:30:302873ブラウズ
jQuery は、HTML ドキュメントの走査やイベント処理などの多くのタスクの開発を簡素化するため、一般的に使用される JavaScript ライブラリです。
場合によっては、JavaScript が iframe または親ページと通信する必要があり、この場合、親ページ内の要素またはデータを取得する必要があります。親ページ要素またはデータを取得するいくつかの方法を次に示します。
- 親オブジェクト
親ページは親オブジェクトを使用して現在のページにアクセスでき、子ページも window.parent を通じて親ページにアクセスできます。親ページのすべての要素と属性を取得するには、parent を使用します。 myIframe という名前の iframe 要素を含む親ページがあるとします。子ページは次のコードを使用して、親ページ内のすべての h1 タグを取得できます:
var h1s = parent.$("h1");
- window.top object
top オブジェクトを使用して親ページにアクセスすることもできます。これにより、ページ階層全体へのアクセスが提供され、そこからウィンドウ全体にアクセスできます。 top を使用して、親ページの要素と属性にアクセスできます。
親と比較して、top を使用する主な利点はクロスドメインです。親ページと子ページのドメイン名が異なる場合は、top を使用してクロスドメインのセキュリティ制限を回避します。
var h1s = window.top.$("h1");
- postMessage メソッドの使用
postMessage は HTML5 で導入された新しいメソッドで、2 つのウィンドウ間でメッセージを安全に配信するために使用されます。 postMessage メソッドを使用すると、子ページは親ページにメッセージを送信でき、親ページはこれらのメッセージをリッスンできます。
サブ ページ コード:
window.parent.postMessage("Hello from iframe!", "*");
親ページでは、メッセージをリッスンし、必要に応じて親ページの要素またはデータを取得できます:
window.addEventListener("message", function(event) {
if (event.source != window.parent) return;
// 获取消息的内容
var data = event.data;
// 在父页面中查找h1元素
var h1s = $('h1', event.source.document);
}, false);
- 使用window .opener プロパティ (ポップアップ ウィンドウのみ)
子ページがポップアップ ウィンドウで開かれている場合、window.opener プロパティを使用して、開いている親ウィンドウのオブジェクトにアクセスできます。 。
var h1s = window.opener.$("h1");
つまり、どの方法を使用しても、親ページ要素またはデータを取得するにはクロスドメイン権限が必要です。クロスドメイン機能を使用する場合は、必ずセキュリティを実装し、ベスト プラクティスに従ってください。
以上がjqueryを使用して親ページ要素またはデータを取得するいくつかの方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。