Iframe 内の要素にアクセスしてスタイルを設定するにはどうすればよいですか?

iframe 内の要素へのアクセス

iframe を利用して外部コンテンツを埋め込む場合、要素をどのように操作またはスタイル設定するかという問題が発生する場合があります。中に含まれています。 iframe は外部コンテンツを組み込む手段を提供しますが、親ページから CSS を直接適用する機能を制限する別のレンダリング コンテキストも作成します。

クロスオリジンの制限

クロスオリジンのセキュリティ対策のため、2 つのページのドメインが一致しない場合、親ページの iframe 内の要素に CSS を適用することはできません。この制限は、悪意のあるスクリプトが異なる発信元のコンテンツにアクセスして変更することを防ぐために適用されます。

JavaScript ベースの通信

iframe のコンテンツが、親ページではJavaScript通信が可能になります。このチャネルを通じて、親ページ内の JavaScript コードは iframe のドキュメント オブジェクト モデル (DOM) と対話できます。この対話には、iframe のドキュメントへの CSS の挿入が含まれる場合があります。

CSS 挿入の制限

JavaScript 通信であっても、iframe のドキュメントに挿入できる CSS には制限があります。 iフレーム。たとえば、CSS ルールを iframe 内の個々の要素に直接適用することはできません。代わりに、JavaScript を使用して iframe の CSS スタイルシートを変更するか、新しい CSS ルールを動的に作成する必要があります。

外部コンテンツの制限

iframe のコンテンツが別のドメインから発信されている場合、その要素を直接操作したり、親ページから CSS を適用したりする方法はありません。親ページは、iframe のサイズ、可視性、および位置の制御に制限されていますが、実際のコンテンツのレンダリングにはアクセスできません。

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