☰

iframe 内のコンテンツの body スタイルを上書きする 質問する

tag-icon • tag-icon css iframe styles overriding
iframe 内のコンテンツの body スタイルを上書きする 質問する

内の body 要素の背景画像と色をどのように制御できますかiframe? 埋め込まれた body 要素には クラスがあり、 はiframeサイトの一部であるページのものであることに注意してください。

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

iframeエディター内の whenの bodyには、他の場所では使用されていないクラスがあるため、このような問題を解決するためにここに配置されていると想定しています。ただし、スタイルを適用してもclass.body、body に適用されたスタイルは上書きされません。奇妙なことに、スタイルは Firebug に表示されるため、何が起こっているのかわかりません。

ありがとう

更新 - @mikeq の、body のクラスにスタイルを追加するという解決策を試しました。メイン ページのスタイルシートに追加した場合は機能しませんが、Firebug で追加した場合は機能します。これは、Firebug がページ上のすべての要素に適用され、CSS が iframe 内では適用されないためだと思います。これは、ウィンドウが読み込まれた後に JavaScript で CSS を追加すると機能することを意味しますか?

ベストアンサー1

以下は、iframe コンテンツが同じ親ドメインからのものである場合にのみ機能します。

次のコードは私の場合は機能します。Chrome と IE8 でテスト済み。内部の iframe は、親ページと同じドメインにあるページを参照します。

この特定のケースでは、内部の iframe で特定のクラスを持つ要素を非表示にしています。

基本的には、styleフレームに読み込まれたドキュメントのヘッド セクションに要素を追加するだけです。

frame.addEventListener("load", ev => {
    const new_style_element = document.createElement("style");
    new_style_element.textContent = ".my-class { display: none; }"
    ev.target.contentDocument.head.appendChild(new_style_element);
});

スタイルシート リソースを参照するために、要素をstyle使用する代わりにもできます。link

おすすめ記事