JavaScript のクロスオリジン制限を越えて iFrame 要素にアクセスするにはどうすればよいですか?

JavaScript での iFrame 要素へのアクセス: クロスオリジン制限への対処

iframe を含む Web ページを操作する場合、それらの iframe 内の要素にアクセスすると問題が発生する可能性があります課題。これは、JavaScript を使用して親ページから iframe 内にロードされた子ページの要素を操作しようとするときによく発生します。

問題:

指定されたシナリオの場合の目標は、iframe 内にある textarea 要素の値を読み取ることです。ただし、window.parent.getelementbyID().value メソッドを使用しても、目的の値を取得できません。

解決策:

ここで重要な考慮事項は、クロスです。 iframe 要素の元の性質。 iframe が親ページとは異なるオリジン (ドメイン) から読み込まれる場合、ブラウザのセキュリティ ポリシーにより、iframe の要素への直接アクセスが禁止されます。

異なるオリジンにまたがって iframe 内の要素にアクセスするには、次の手順を実行できます。取得:

1. クロスオリジン アクセスの確認: iframe の src 属性の URL をチェックして、iframe が実際に別のオリジンから読み込まれていることを確認します。
2. Window.frames コレクションを使用します: このコレクションは、親ページに埋め込まれた iframe の DOM へのアクセスを提供します。ただし、iframe が親ページと同じオリジンのものである場合にのみ機能します。
3. IframeElement API を利用します: この API を使用すると、iframe のプロパティ (contentDocument など) をきめ細かく制御できます。 。この API を使用すると、iframe 内の要素にアクセスして操作できます。

実装:

同じオリジンからロードされた iframe の場合、次のコードを実行できます。 textarea 要素にアクセスするために使用されます:

<code class="js">window.frames['myIFrame'].document.getElementById('myIFrameElemId')</code>

iframe が異なるオリジンからのものであるシナリオでは、CORS や postMessage API などのクロスオリジン通信技術を使用した代替アプローチを採用する必要があります。ただし、これには両側で特別なセットアップと構成が必要です。

以上がJavaScript のクロスオリジン制限を越えて iFrame 要素にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。