web-dev-qa-db-ja.com

iframe内のコンテンツのボディスタイルをオーバーライドする

iframe内のbody要素の背景画像と色を制御するにはどうすればいいですか？埋め込みbody要素はクラスを持ち、iframeは私のサイトの一部であるページのものです。

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

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

ありがとう

UPDATE - ボディのクラスであるクラスにスタイルを追加する@ mikeqの解決策を試してみました。メインページのスタイルシートに追加してもうまくいきませんが、Firebugと共に追加してもうまくいきます。これはFirebugがページ上のすべての要素に適用されるのに対して、CSSはiframe内には適用されないためだと思います。これは、JavaScriptでウィンドウをロードした後にCSSを追加してもうまくいくということですか？

cssiframestylesoverriding
136
jd6699

Iframeはあなたのページの中に別のウェブページを表示するあなたのページの「穴」です。 iframeの内容はどのような形でもなく、親ページの一部でもありません。

他の人が述べているように、あなたの選択肢は以下のとおりです。

  • iframeにロードされているファイルに必要なCSSを与える
  • iframe内のファイルがあなたの親と同じドメインからのものである場合、あなたは親からiframe内の文書のDOMにアクセスすることができます。
96
DA.

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

次のjqueryスクリプトは私のために働きます。 ChromeとIE8でテスト済み。内側のiframeは、親ページと同じドメインにあるページを参照しています。

この特定のケースでは、内側のiframe内の特定のクラスを持つ要素を隠しています。

基本的には、内側のiframeの「head」に「style」要素を追加するだけです。

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});
234
SimpleSam5

直接アクセス、したがってソースHTMLファイルおよび/またはCSSファイルの所有権がない限り、iframeに表示されるページのスタイルを変更することはできません。

これは停止することです XSS（クロスサイトスクリプティング）

25
Myles Gray

iframeは別のスコープを持っているので、あなたはそれをjavascriptでスタイルしたり内容を変更するためにアクセスすることはできません。

基本的には「別のページ」です。

あなたができる唯一のことはそれ自身のCSSを編集することです。あなたのグローバルCSSでは何もできないからです。

7
Alessandro Vendruscolo

別のドメインをオーバーライドiframe CSS

SimpleSam5の回答 の一部を使用することで、Tawkのチャットiframeのいくつかでこれを達成しました（ カスタマイズインターフェース は問題ありませんが、さらにカスタマイズが必要です）。

モバイルデバイスに表示されるこの特定のiframeでは、デフォルトのアイコンを非表示にして背景画像の1つを配置する必要がありました。私は次のことをしました：

Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe's content is fully loaded
  $('#mtawkchat-minified-iframe-element').
    contents().find("head").append(
     $("<style type='text/css'>"+
       "#tawkchat-status-text-container {"+
         "background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
         "background-size: 100%;"+
       "} "+
       "#tawkchat-status-icon {display:none} </style>")
   );
};

私はTawkのドメインを所有していないのでこれは私のために機能したので、同じ親ドメインからでなくてもこれを行うことができます（Samの答えに対する Jeremy Beckerのコメント にもかかわらず）。

6
CPHPython

このコードはVanilla JavaScriptを使用しています。新しい<style>要素を作成します。その要素のテキストコンテンツを新しいCSSを含む文字列に設定します。そしてそれはその要素をiframeドキュメントのヘッドに直接追加します。

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  'body {' +
  '  background-color: some-color;' +
  '  background-image: some-image;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);
2
jtheletter

Iframeをホストしているページとiframeのページを管理している場合は、iframeにクエリパラメータを渡すことができます。

ホスティングサイトがモバイルかどうかに基づいてiframeにクラスを追加する例を示します。

IFrameを追加する：

var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile; 

$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl );

IFrameの内側：

//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
    $("body").addClass("mobile");
}
1
Ben

私は ブログ を持っています、そして私は私の埋め込まれたGistのサイズを変更する方法を見つけることに多くの問題を抱えていました。投稿マネージャでは、テキストの書き込み、画像の配置、およびHTMLコードの埋め込みのみが可能です。ブログのレイアウトはそれ自体敏感です。それはWixで構築されています。ただし、埋め込みHTMLはそうではありません。生成されたiFrameの本体内でコンポーネントのサイズを変更することが不可能であることについて多くの記事を読みました。だから、ここに私の提案です：

IFrame内にコンポーネントが1つしかない場合、つまりGistの場合は、Gistのみをサイズ変更できます。 iFrameは忘れてください。

私はビューポートに問題がありました、異なるユーザエージェントへの特定のレイアウト、そしてこれは私の問題を解決したものです：

<script language="javascript" type="text/javascript" src="https://Gist.github.com/roliveiravictor/447f994a82238247f83919e75e391c6f.js"></script>

<script language="javascript" type="text/javascript">

function windowSize() {
  let Gist = document.querySelector('#Gist92442763');

  let isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent)
    },
    BlackBerry: function() {
        return /BlackBerry/i.test(navigator.userAgent)
    },
    iOS: function() {
        return /iPhone|iPod/i.test(navigator.userAgent)
    },
    Opera: function() {
        return /Opera Mini/i.test(navigator.userAgent)
    },
    Windows: function() {
        return /IEMobile/i.test(navigator.userAgent) || /WPDesktop/i.test(navigator.userAgent)
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

  if(isMobile.any()) {
    Gist.style.width = "36%";
    Gist.style.WebkitOverflowScrolling = "touch"
    Gist.style.position = "absolute"
  } else {
    Gist.style.width = "auto !important";
  }
}

windowSize();

window.addEventListener('onresize', function() {
    windowSize();
});

</script>

<style type="text/css">

.Gist-data {
  max-height: 300px;
}

.Gist-meta {
  display: none;
}

</style>

ロジックは、ユーザーエージェントに基づいてGist（またはあなたのコンポーネント）のCSSを設定することです。クエリセレクターに適用する前に、必ずコンポーネントを特定してください。 応答性がどのように機能しているかを見てみてください 。

0
Victor R. Oliveira