ウェブ、ショウジン

インラインフレーム(iframe)で読み込んだ内容の背景を透過させる

2012-3-26
Category
CSS HTML

iframeで読み込んだ外部ページの背景がIE(6,7,8)では透過ではなく白色になっていて「おろろろ?」となったのを調べて解消したメモ。

ちなみにFirefoxやSafari、Chromeではとくに指定をしなくても背景は透過というかとくに色がつくことはない。(Operaもダメという話も)

まず、インラインフレームに読み込まれる外部ページのbodyに背景色が透明という指定をする。

iframeで読み込まれる外部ページ
external.html

body{
     background-color:transparent;
}

IEの場合はさらに、iframeの記述に「allowtransparency」属性の指定を追加する必要がある。
(allowtransparency=”true”)

external.htmlをiframe要素を使って表示するページ
sample.html

<iframe src="/external.html" width="636" height="468" frameborder="0" scrolling="no" name="sample" marginwidth="0" marginheight="0" allowtransparency="true"></iframe>

以上。

インラインフレームの背景を透過する
が大変分かりやすく役立ちました。ありがとうございます。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿