シェアする

  • このエントリーをはてなブックマークに追加

iframe内のcssを編集するJavaScript

シェアする

  • このエントリーをはてなブックマークに追加

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

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



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

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

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

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

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

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



シェアする

  • このエントリーをはてなブックマークに追加

フォローする