[解決済み】iframe内のコンテンツにボディスタイルをオーバーライドする
質問
の中にある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 にアクセスすることができます。
関連
-
[解決済み] 他のブラウザが画像を読み込むときに、Chromeがエラー **Failed to load resource: net::ERR_NAME_NOT_RESOLVED** を発生させる。
-
[解決済み】div間の空白を削除する
-
[解決済み] EqualsメソッドがオーバーライドされたときにGetHashCodeをオーバーライドすることが重要な理由は何ですか?
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] CSSは常にJavascriptより優先されるべきか?
-
[解決済み] CSS 100% height と padding/margin の関係
-
[解決済み] CSSの爆発を管理する
-
[解決済み] 要素のみのCSSスタイルのリセット/削除
-
[解決済み] 背景画像にCSSフィルタを適用する方法
-
[解決済み】CSSでclassにワイルドカード*を使用する場合
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Rails: Sprockets::Rails::Helper::AssetNotPrecompiled の開発中。
-
[解決済み] リンクにアニメーションGIFを表示し、ホバーとリセットで再生する方法
-
[解決済み] ChromeでCSSカスタムスタイルのボタンから青枠を削除する
-
[解決済み] Bootstrapのポップオーバーの幅を変更する
-
[解決済み] reactでスティッキーフッターを作るには?
-
[解決済み] テーブルの行にマージンを追加する方法 <tr> [重複]。
-
[解決済み] MUIでカスタムアニメーションエフェクト@keyframesを適用する方法は?
-
[解決済み] Bootstrap 3 で列からパディングを削除する
-
[解決済み] three.jsの背景を透明や他の色に変更する。
-
[解決済み] div要素内でテキストが折り返されない