Iframe の内外のページで JS がどのように動作するかの概要

Iframe の内外のページで JS がどのように動作するかの概要

iframeの外側のiframeのコンテンツを取得する

方法1

contentWindow と contentDocument の 2 つの API を通じて:

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
var document = iframe.contentDocument;
console.log("window",iwindow); //iframe のウィンドウ オブジェクトを取得します console.log("document",idoc); //iframe のドキュメントを取得します
console.log("html",idoc.documentElement);//iframe の HTML を取得します

このうち、iframe.contentWindow は iframe のウィンドウ オブジェクトを取得でき、iframe.contentDocument は iframe のドキュメント オブジェクトを取得できます。

方法2

Name 属性と組み合わせて、ウィンドウによって提供されるフレームを通じて取得します。

<iframe src="/index.html" id="ifr1" name="ifr2" スクロール="はい">
  <p>お使いのブラウザは iframe をサポートしていません。</p>
</iframe>
<script type="text/javascript">
    コンソールにログ出力します。
    console.dir(document.getElementById("iframe").contentWindow);
</スクリプト>

iframe 内の iframe 外のコンテンツを取得する

window.parent は、前のレベルのウィンドウ オブジェクトを取得します。それがまだ iframe である場合は、iframe のウィンドウ オブジェクトになります。
window.topはトップレベルコンテナのウィンドウオブジェクト、つまり開いたページのドキュメントを取得します。

iframe内の親ページで定義されたメソッドと変数を呼び出す

ウィンドウの親メソッド。
ウィンドウの親の値。

親ページで iframe 子ページを操作するためのメソッドと変数

window.frames["iframe_Name"].window.childMethod();
window.frames["iframe_Name"].window.childValue;

要約する

Iframe を使用する際に注意すべき点がさらに 2 つあります。

  1. 必ず iframe が読み込まれた後に操作を実行してください。iframe が読み込まれる前に iframe 内のメソッドまたは変数を呼び出すと、エラーが発生します。
  2. iframe が外部ページにリンクしている場合、セキュリティ メカニズムは同じドメイン名での通信方法を使用できません。

iframe の読み込みが完了したかどうかを確認する

iframe.onload = 関数() {
    //やるべきこと
}

異なるドメインの通信

親ページから子ページへのデータの受け渡し

位置オブジェクトのハッシュ値を使用して、通信データを渡します。親ページの iframe の src の後にデータ文字列を追加し、子ページで何らかの方法でここでデータを即座に取得します。

サブページは親ページにデータを渡す

プロキシ iframe が使用されます。プロキシ iframe は子ページに埋め込まれ、親ページと同じドメインにある必要があります。次に、前述の同一ドメイン通信方式の実装原理を最大限に活用して、子ページのデータをプロキシ iframe に渡します。次に、プロキシ iframe とメイン ページは同じドメインにあるため、メイン ページは同じドメイン方式を使用してこれらのデータを取得できます。

Iframe の内外のページで JS がどのように動作するかについては、これで説明は終わりです。Iframe ページで JS がどのように動作するかについての関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS で if 判定をスムーズに行う方法
  • JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明
  • JSON.stringify のさまざまな用途のまとめ
  • Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)
  • JavaScript JSON.stringify() の使用法の概要
  • JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明
  • json.stringify() と json.parse() の違いと使い方
  • Selenium+BeautifulSoup+jsonはスクリプトタグ内のjsonデータを取得します
  • JavaScript のカンマ式が含まれている場合について

<<:  マークアップ言語 - リスト再び

>>:  MySQL ストアド プロシージャ関連の権限変更の問題

推薦する

MySQLデータストレージプロセスパラメータの詳細な例

MySQL ストアド プロシージャ パラメータには、in、out、inout の 3 種類があります...

jsを使用して簡単なスネークゲームを書く

この記事では、参考までに、jsで書かれたシンプルなスネークゲームの具体的なコードを紹介します。具体的...

CSS3 は反転可能なホバー効果を実現します

CSS3 は反転可能なホバー効果を実装します。具体的なコードは次のとおりです。 1.css /*基本...

CSSスタイルで実現されるHTML背景色のグラデーション効果

エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...

史上最もクリエイティブな404ページのデザインは、ウェブサイトのユーザーエクスペリエンスを効果的に向上させます

ウェブを閲覧しているときに 404 ページに遭遇することはあまりないので、見落としがちです。しかし、...

ウェブデザインで注意すべき検索最適化の知識

1. 新サイトホームページのリンクレイアウト1. リンク配置の位置:リンク配置の位置によって、リンク...

MySQLクエリデータを時間別に表示します。データがない場合は0を入力してください。

需要背景統計インターフェースでは、フロントエンドは 2 つの配列を返す必要があります。1 つは 0 ...

MySQL スケジュールバックアップタスクの簡単な分析

導入実稼働環境では、データの損失を回避するために、通常、データベースは定期的にバックアップされます。...

MySql 5.6.36 64 ビット グリーン バージョンのインストール グラフィック チュートリアル

MySQL のインストールについてはインターネット上に多くの記事がありますが、今日ノート PC にイ...

TCPパフォーマンスチューニングの実装原理とプロセス分析

3ウェイハンドシェイクフェーズクライアントSYNパケットの再試行回数sysctl -w net.ip...

Navicat For MySQL の使い方に関する簡単なチュートリアル

推薦する: Navicat for MySQL 15 登録とアクティベーションの詳細なチュートリアル...

MySQL の if 関数の正しい使い方の詳細な説明

今日私が書こうとしている内容では、プログラムは 7 時間近く実行され、データベースに 1,000 万...

CSS3でカルーセル画像を作成する方法

スライドショーは Web ページでよく見られます。美しい写真が使われています。こちらは純粋な CSS...

@media レスポンシブ CSS を使用してさまざまな画面に適応する例

定義と使用@media クエリを使用すると、さまざまなメディア タイプに異なるスタイルを定義できます...

JavaScriptは文字の出現回数をカウントします

この記事の例では、文字の出現回数をカウントするJavaScriptの具体的なコードを参考までに共有し...