iframe内のcssを編集するJavaScript

こちらもネットショップASPなどにありがちなのですが、システムで自動的に表示されるコンテンツがiframeで読み込まれていたりした場合、そのスタイルの変更は通常のcssの編集等では出来ません。

そんな時はやはりJavaScriptにて書き換えて上げる等の対応が必要です。

具体例：iframe内の【width】を変更してみる

<script>
$(function(){
    $(window).load(function(){
		$('iframe').contents().find('#area').css('width', '100px');
    });
});
</script>

【#area】はiframe内での適用したid（もしくはclass）なので、適宜書き換えます。今回は【width】を【100px】に書き換えるという例ですので、こちらも適宜書き換えで。

Google ChromeではJavaScriptによるiframe内のcss編集が効かない場合も

と、通常は上記で無事cssが書き換えられて、iframe内のスタイルを思いの通りに変更出来るのですが、Google Chromeにおいてはうまく反映されないという現象が起きています。

原因を調べてみたところ、どうやら同ページ内にtwitterのツイートボタンを設置している場合はこのJavaScriptが効かなくなるようです。ツイートボタンもiframeで読み込ませてページ上にボタンを設置する仕組みです。それでiframe内のcssに干渉して編集しようとする動きを（なぜかChromeが）ブロックして無効になっている様子。

現在のところ、こちらに対しての有効な方法は見つかっていないので、webページの制作側としてはiframeのスタイル変更を諦めるか、ツイートボタンを設置しないのどちらかで対応するしか無さそうです。

[amazonjs asin=”4844363689″ locale=”JP” title=”現場でかならず使われている CSSデザインのメソッド”]