web-dev-qa-db-ja.com

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

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

cssiframe
224
Iris

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

覚えておいて、同じOriginポリシーが適用されるので、あなたはこれをあなた自身のサーバから来ているiframe要素に対してのみ行うことができます。

私は Prototype フレームワークを使いやすくしています。

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

または

frame1.$('mydiv').addClassName('withborder')
104
Diodeus - James MacFarlane

一言で言えばいいえ。

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

89
mmattax

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

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

最初に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)); });

がんばろう！

12
user1570636

簡単な答えは：いいえ、すみません。

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

9
Justin Lucente

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);
7
Priyank Gupta

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

3
Al W

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

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

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

3
adamj

ある種のハックっぽいやり方は、ユージーンが言ったようなものです。私は彼のコードに従い、ページのために私のカスタムCssにリンクしました。私にとっての問題は、Twitterのタイムラインでは、コードを無効にするためにTwitterのサイドステップを実行する必要があるということでした。これで、私たちのCSSを含むローリングタイムラインができました。大きいフォント、適切な行の高さ、およびスクロールバーをその上限よりも大きい高さで非表示にする。

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

はい、面倒ですが可能です。あなたは、ページのHTMLをあなたのページの本文にプリント/エコーしてからCSSルール変更機能を適用する必要があります。上記と同じ例を使用すると、ページ内のdivを見つけ、それにCSSを適用してからエンドユーザーに再印刷またはエコーアウトするという構文解析方法を使用することになります。これは必要ないので、他のWebページのCSSのすべての項目にその機能をコーディングしたくはありません。

参考文献：

0
eric wiedemann