CSSを使用してiframe内のdivスタイルに影響を与える

CSSのみを使用して、ページのiframe内にあるdivのスタイルを変更することはできますか？

JavaScriptが必要です。親ページで行う場合と同じですが、JavaScriptコマンドの前にiframeの名前を付ける必要があります。

同じ起点ポリシーが適用されるので、自分のサーバーからのiframe要素に対してのみこれを実行できることに注意してください。

Prototypeフレームワークを使用して簡単にしています。

frame1.$('mydiv').style.border = '1px solid #000000'

または

frame1.$('mydiv').addClassName('withborder')

つまり、いいえ。

クロスドメインリソースの制限によりiframeに読み込まれたページを制御できない限り、iframeに読み込まれたHTMLにCSSを適用することはできません。

はい。詳細については、この別のスレッドをご覧ください 。CSSをiframeに適用する方法は？

var cssLink = document.createElement("link");
cssLink.href = "style.css";  
cssLink.rel = "stylesheet";  
cssLink.type = "text/css";  
frames['frame1'].document.body.appendChild(cssLink); 

iframe最初のコンテンツを取得jQueryし、通常どおりそれらに対してセレクターを使用できます。

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")

$("#iframe-id").contents().find("img").addClass("fancy-zoom")

$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });

幸運を！

簡単な答えは次のとおりです。いいえ、申し訳ありません。

CSSだけでは不可能です。スタイルを設定するには、基本的にiframeコンテンツを制御する必要があります。いくつかの必要なスタイルを動的に挿入するために、JavaScriptまたは選択したWeb言語（私は少し読みましたが、自分には慣れていません）を使用する方法がありますが、iframeコンテンツを直接制御する必要があります。あなたが持っていないように。

Jqueryを使用して、ソースが読み込まれるまで待機します。これが私が達成した方法です（角度間隔を使用し、JavaScriptのsetIntervalメソッドを使用できます）。

var addCssToIframe = function() {
    if ($('#myIframe').contents().find("head") != undefined) {
        $('#myIframe')
                .contents()
                .find("head")
                .append(
                        '<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
        $interval.cancel(addCssInterval);
    }
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);

おそらくあなたの考えている方法ではありません。iframe <link>もcssファイルに含める必要があります。そして、それが別のドメインにある場合、JavaScriptを使用しても実行できません。

どうやらそれはjQueryを介して行うことができます：

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

https://stackoverflow.com/a/13959836/1625795

一種のハックっぽいやり方はユージーンが言ったようなものです。私は彼のコードを追跡し、ページのカスタムCssにリンクしました。私にとっての問題は、Twitterのタイムラインでは、コードをsmidgenにオーバーライドするためにTwitterを回避する必要があるということです。これで、CSSを含むローリングタイムライン、IEより大きなフォント、適切な行の高さ、および制限を超える高さの場合はスクロールバーが非表示になります。

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary

これを追加するだけですべてうまくいきます：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

はい、面倒ですが可能です。ページのHTMLをページの本文に印刷/エコーしてから、CSSルール変更関数を適用する必要があります。上記と同じ例を使用すると、基本的には、ページ内のdivを見つけてCSSを適用し、それをエンドユーザーに再印刷/エコーする解析メソッドを使用します。私はこれを必要としないので、別のWebページのCSSのすべての項目にその機能をコード化して、単純にしたくありません。

参照：

• IFRAMEの印刷内容
• PHPまたはJavaScriptを使用したHTMLソースコードへのアクセスと印刷
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

さまざまなソリューションを組み合わせると、これが私にとってうまくいきました。

$(document).ready(function () {
    $('iframe').on('load', function() {
        $("iframe").contents().find("#back-link").css("display", "none");
    }); 
});

クライアント側からはできません。iframeはドメインの一部ではないため、JavaScriptエラーが発生します "エラー：プロパティ"ドキュメント "へのアクセスが拒否されました"。唯一の解決策は、サーバー側のコードからページをフェッチし、必要なCSSを変更することです。