Javascript を使用して iframe のコンテンツにアクセスして操作するにはどうすればよいですか?

JavaScript で iframe のコンテンツを取得する

JavaScript で iframe の本文コンテンツを取得するには、特定のアプローチが必要です。 jQuery は簡単な方法を提供しますが、純粋な Javascript も同様に効果的なソリューションを提供します。

純粋な Javascript のアプローチ

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

   • var iframe = document.getElementById('id_description_iframe');
   • var iframe = document.querySelector('#id_description_iframe');

2. iframe のドキュメントを取得します:

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

このアプローチは、最初に contentDocument プロパティをチェックし、Internet Explorer との互換性のために contentWindow.document にフォールバックするため、ほとんどのブラウザーで機能します。

要素の選択と呼び出し関数

iframe ドキュメントを取得したら、標準の Javascript メソッドを使用して操作できます。

• ID による要素の取得: iframeDocument.getElementById('frameBody') ;
• CSS セレクターを使用します。 iframeDocument.querySelectorAll('#frameBody');
• iframe ウィンドウを取得します: var iframeWindow = iframe.contentWindow;

• iframe ウィンドウで関数を呼び出すか変数にアクセスします:

  • iframeWindow.myVar = window.myVar;
  • var myVar = iframeWindow.myFunction(param1 /*, ... */);

考慮事項

iframe を使用する場合は、同一オリジン ポリシーを必ず考慮してください。 iframe と親ドキュメントのオリジンが異なる場合、クロスオリジン制限が適用される可能性があります。

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