JavaScript を使用して iframe 内の要素にアクセスするにはどうすればよいですか?

JavaScript を使用した iframe 内の要素へのアクセス

この記事では、JavaScript を使用して iframe 内に含まれる要素にアクセスする問題について説明します。主な目的は、iframe 内にある textarea の値をその子ページから取得することです。

window.parent.getElementByID().value を利用する従来のアプローチでは、iframe 内の textarea 値を取得できません。この問題を解決するには、window.frames コレクションを活用することが必要です。

同じドメイン iframe 内の要素にアクセスする

iframe が同じドメインに存在する場合、親ページの要素へのアクセスは簡単です。 window.frames コレクションは、iframe のコンテンツを操作する方法を提供します。

// Replace 'myIFrame' with the ID of your iframe
// Replace 'myIFrameElemId' with the ID of the element within the iframe
// You can now manipulate elements within the iframe as if they were part of the
// parent document
window.frames['myIFrame'].document.getElementById('myIFrameElemId')

クロスドメイン iframe の要素へのアクセス

ただし、iframe がホストされている場合は、別のドメインでは、ブラウザのセキュリティ対策によってそのようなアクセスが防止されます。クロスドメイン iframe と対話しようとすると、同一オリジン ポリシーにより例外が発生します。

この場合、クロスオリジン通信に postMessage を使用するなど、代替アプローチが必要になる場合があります。親ページと iframe のコンテンツ。

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