CSSのみを使用して、ページ上のiframe内にあるdivのスタイルを変更することは可能ですか?
あなたはJavaScriptが必要です。親ページで行うのと同じですが、JavaScriptコマンドの前にiframeの名前を付ける必要がある点が異なります。
覚えておいて、同じOriginポリシーが適用されるので、あなたはこれをあなた自身のサーバから来ているiframe要素に対してのみ行うことができます。
私は Prototype フレームワークを使いやすくしています。
frame1.$('mydiv').style.border = '1px solid #000000'
または
frame1.$('mydiv').addClassName('withborder')
一言で言えばいいえ。
ドメイン間のリソース制限のためにiframeにロードされたページを制御できない限り、iframeにロードされたHTMLにCSSを適用することはできません。
はい。詳細については、この他のスレッドを見てください。 iframeにCSSを適用する方法?
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言語(私は少し読みましたが、私自身は使い慣れていません)を使用する方法があります。あなたが持っていないように。
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はcssファイルにも<link>
を含める必要があります。また、別のドメインにある場合は、JavaScriptを使用してもできません。
どうやらそれはjQueryを介して行うことができます:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
ある種のハックっぽいやり方は、ユージーンが言ったようなものです。私は彼のコードに従い、ページのために私のカスタム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
はい、面倒ですが可能です。あなたは、ページのHTMLをあなたのページの本文にプリント/エコーしてからCSSルール変更機能を適用する必要があります。上記と同じ例を使用すると、ページ内のdivを見つけ、それにCSSを適用してからエンドユーザーに再印刷またはエコーアウトするという構文解析方法を使用することになります。これは必要ないので、他のWebページのCSSのすべての項目にその機能をコーディングしたくはありません。
参考文献: