1. ホーム
  2. css

[解決済み】iframe内のコンテンツにボディスタイルをオーバーライドする

2022-04-17 08:49:35

質問

の中にあるbody要素の背景画像と色を制御するには、どうすればよいでしょうか。 iframe ? なお、埋め込まれたボディ要素にはクラスがあり、そのクラスは iframe は、私のサイトの一部であるページのものです。

なぜこれが必要かというと、私のサイトでは、bodyに黒い背景が割り当てられ、テキストを含むdivに白い背景が割り当てられているからです。WYSIWYG エディタでは、テキストを含む div に白い背景が割り当てられます。 iframe を使って編集時にコンテンツを埋め込むのですが、divが含まれないため、テキストが非常に読みづらくなっています。

の本文は iframe このような問題を解決するために設置されたのでしょう。しかし class.body は、bodyに適用されたスタイルをオーバーライドしません。変なのは、Firebugではスタイルが表示されることで、何が起こっているのかさっぱりわかりません

ありがとうございます。

UPDATE - @mikeq さんの解決策として、body のクラスである class にスタイルを追加することを試してみました。これは、メインページのスタイルシートに追加した場合は動作しませんが、Firebugで追加した場合は動作します。これは、Firebugがページ上のすべての要素に適用されるのに対し、iframe内ではCSSが適用されないからだと推測しています。これは、JavaScriptでウィンドウロード後にCSSを追加すれば動作するということでしょうか?

解決方法は?

iframeは、あなたのページにある「穴」で、その中に別のウェブページを表示します。iframeのコンテンツは、どのような形であれ、親ページの一部ではありません。

他の方がおっしゃっているように、選択肢としては

  • iframeで読み込まれるファイルに必要なCSSを付与する。
  • iframe 内のファイルが親と同じドメインのものであれば、親から iframe 内のドキュメントの DOM にアクセスすることができます。