2

以下のコードを使用しましたこれは私のIframeです：

<iframe scrolling='no' frameborder='1' id='fblike' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.XYZ.com%2F&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=50'></iframe>

$('#fblike').contents().find('.pluginButton').css({'background','#FF8000'});

Cssも直接適用しました

.pluginButton {
    background: none repeat scroll 0 0 #FF8000 !important;
}

pluginButton の背景を変更したい。背景に画像を適用したい。適用方法は?

4

2 に答える 2

1

.css を正しく使用したかどうかを確認するために html を使用できないため、css を設定するコードは意味的に問題ないようですselectors。DOM要素が利用可能になる前にアクセスしている可能性があります。フレームの要素は、document.ready イベントでは準備ができていない可能性がwindow.loadありますが、window.load にコードを配置して、iframe 内の要素をスクリプトで使用できるようにします。

$(window).load(function){    
    $('#fblike').contents().find('.pluginButton').css({'background','#FF8000'});    
})
于 2013-01-31T05:56:04.613 に答える
1

私があなたを正しく理解していれば、あなたがしたいことは、Facebook ページをロードする iframe に CSS を挿入することです。

簡単に言えば、それは不可能です。SO に投稿された回答と、より詳細な説明を次に示します。 iframe 内の要素に CSS を適用できますか?

いいえ、iframe の外からではありません。アンは独自の世界です。ドメインなどが一致する場合、Javascript は内外で通信でき、(必要に応じて) CSS を子フレームに挿入できます。

に別のドメインのコンテンツが含まれている場合、できることはほとんどありません。親ページは、フレームのサイズと表示の有無を制御し、配置などによって独自のコンテンツをフレーム上に配置できますが、実際のフレーム コンテンツがレンダリングされる方法に直接影響を与えることはできません。

CSS を iframe に適用する方法は?

編集：これはクロスドメインでは機能しません。

ここには、iframe ブロックのスタイルと iframe に埋め込まれたページのスタイルの 2 つの異なるものがあります。通常の方法で iframe ブロックのスタイルを設定できます。

<iframe name='iframe1' id="iframe1" src="empty.htm" frameborder="0" border="0" cellspacing="0" style="border-style: none;width: 100%; height: 120px;"></iframe>

iframe に埋め込まれたページのスタイルは、子ページに含めることによって設定する必要があります。

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

または、Javascript を使用して親ページからロードすることもできます。

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet";
cssLink .type = "text/css"; 
frames['frame1'].document.body.appendChild(cssLink);
于 2013-01-31T06:40:48.323 に答える