Pure JavaScript を使用して iFrame のコンテンツを取得するにはどうすればよいですか?

純粋な JavaScript で iFrame の本文コンテンツを取得する

JavaScript を使用すると、現在の HTML ドキュメント内の要素を操作できます。ただし、iframe のコンテンツを取得するには、別のアプローチが必要です。この記事では、jQuery フレームワークで使用されるメソッドに従って、純粋な JavaScript による包括的なソリューションを提供します。

iFrame 要素の取得

まず、その要素を使用してターゲット iframe を特定します。 ID または CSS セレクター:

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

iFrame へのアクセスContent

iframe のコンテンツにアクセスするには、jQuery で採用されているソリューションを利用できます。

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

Internet Explorer では contentWindow プロパティが使用されますが、他のプロパティは使用されません。ブラウザは contentDocument を優先します。この OR 条件により、互換性が保証されます。

iFrame 内の要素の選択

iframe ドキュメントにアクセスすると、通常の方法を使用して特定の要素を選択できます:

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

関数の呼び出しとアクセス変数

iframe の JavaScript コンテキスト内で定義された関数と変数を操作するには、そのウィンドウ要素にアクセスします:

var iframeWindow = iframe.contentWindow;

// Call global functions
var myVar = iframeWindow.myFunction(param1 /*, ... */);

考慮事項

これらすべての操作では、同一生成元ポリシーに従う必要があることに注意してください。クロスオリジン アクセスが必要な場合は、Content-Security-Policy ヘッダーの変更など、特定の対策が必要です。

以上がPure JavaScript を使用して iFrame のコンテンツを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。