jQuery で iframe内のCSSを操作する

「モチの気持ち」より © studio doli

「モチの気持ち」より © studio doli

iframe内に読み込まれるファイル内のCSS操作は、そのままではできません。

でも、jQueryを使えば簡単にできます。
例えば、iframe内のP要素の文字色を赤(red)にするならば以下のようにします。
※ただし、後述しますが条件によってはNGです。

//基本
$('iframe').contents().find('p').css('color', 'red');

.contents().find('セレクタ')を使います。

ChromeだけjQueryによるCSS操作が効かない

しかし、毎度のことながらコトはそう簡単には運ばないもので、テストしてみても何も変化はありません。

原因については、以下が参考になりました。

iframe内のcssを編集するJavaScript | aNote

私はChromeで動作チェックしているのですが、上の参考記事によると、Twitterツイートボタン(公式ウィジェットも?)が設置されたページでは、iframe内のCSSに干渉することをChromeがブロックしているらしい。真偽はともかく、試しにIEやFirefoxで確認したら、あらホント、ちゃんと文字が赤色になっていました。

Chromeを無視するわけにもいかない。Twitterウィジェットをはずせばいいのかもしれないけど、今回CSS操作したいのはまさにそのTwitterウィジェット。はずすわけにはいかないッス。

しばらく悩んだんですが、ステキな解決方法を見つけました。

iframe内のhead要素にCSS外部リンクを追加する

CSSを直接操作するのではなく、CSSファイルを外部リンクさせます。

$(window).load(function(){
	$('iframe').contents().find('head').append('<link href="http://<mydomain>/<path-to>/style.css" rel="stylesheet" type="text/css" media="all" />');
}

無事、CSSを変更させることに成功しました。

Wordpress | , , , , |