iframe内のコンテンツのボディスタイルを上書きする

内のボディ要素の背景画像と色をどのように制御できiframeますか？埋め込まれたbody要素にはクラスがあり、これiframeは私のサイトの一部であるページです。

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

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

ありがとう

更新-私はボディのクラスであるクラスにスタイルを追加する@mikeqのソリューションを試しました。メインページのスタイルシートに追加すると機能しませんが、Firebugで追加すると機能します。これは、Firebugがページ上のすべての要素に適用されているのに対し、CSSはiframe内には適用されていないためと考えています。これは、JavaScriptでウィンドウをロードした後にcssを追加すると機能することを意味しますか？

iframeは、ページ内の別のWebページを表示するページの「穴」です。iframeのコンテンツは、親ページのどのような形もフォームの一部でもありません。

他の人が述べたように、あなたのオプションは次のとおりです：

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

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

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

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

基本的には、内側のiframeの「ヘッド」に「スタイル」要素を追加するだけです。

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

直接アクセスできない場合、つまりソースhtmlファイルやcssファイルの所有権がない限り、iframeに表示されるページのスタイルを変更することはできません。

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

にiframeは別のスコープがあるため、スタイルにアクセスしたり、JavaScriptでコンテンツを変更したりすることはできません。

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

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

別のドメイン 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のコメントに）。

このコードはバニラ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);

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");
}

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

iFrame内にコンポーネントが1つしかない場合、つまり要点がある場合は、要点のみをサイズ変更できます。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>

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

多分それは今変更されていますが、私はこの要素で別のスタイルシートを使用しました：

.feedEkList iframe
{
max-width: 435px!important;
width: 435px!important;
height: 320px!important;
}

埋め込まれたyoutube iframeのスタイルを設定するには ... このページのブログ投稿を参照してください。

iframeページの本文にID（または必要に応じてクラス）を指定します

<html>
<head></head>
<body id="myId">
</body>
</html>

次に、iframeのページ内でも、CSSの背景に背景を割り当てます

#myId {
    background-color: white;
}