ホームページ >ウェブフロントエンド >jsチュートリアル >Pure JavaScript を使用して Iframe の InnerHTML にアクセスするにはどうすればよいですか?

Pure JavaScript を使用して Iframe の InnerHTML にアクセスするにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-09 02:21:10362ブラウズ

How Can I Access the InnerHTML of an Iframe Using Pure JavaScript?

JavaScript で iframe の内部コンテンツにアクセスする

HTML では、iframe 要素はそのドキュメント内に別の Web ページを埋め込みます。埋め込みページのコンテンツを操作するには、親ドキュメントがその本文のコンテンツにアクセスする必要があります。

次の iframe について考えてみましょう。

<iframe>

目的は、テキスト「test<」を取得することです。 br/>」

純粋な JavaScript ソリューション

純粋な JavaScript で iframe の本文コンテンツにアクセスするには、次の手法を使用します:

1 。 iframe 要素を取得します:

var iframe = document.getElementById('id_description_iframe');

2. iframe のドキュメント オブジェクトを取得します:

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

3. iframe 内の body 要素を選択します:

var iframeContent = iframeDocument.getElementById('frameBody');

4. body 要素の innerHTML にアクセスしてコンテンツを取得します:

var iframeBodyContent = iframeContent.innerHTML; // "test<br/>"

追加メモ:

  • このソリューションには同一オリジン ポリシーが必要です
  • iframe が異なるものである場合は、クロスドメイン メッセージングまたは CORS の使用を検討してください。
  • この手法を使用すると、本文のコンテンツを取得できるだけでなく、iframe 内の要素を選択して操作することもできます。

以上がPure JavaScript を使用して Iframe の InnerHTML にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。