iframeをWebサイトに埋め込んだ時、
「iframe内の要素のスタイルを変更したい」
「iframe内にもCSSを適用させたい！」といったことってたまーにありませんか？
ですが、iframe内のスタイルってこんな感じのCSSの書き方だと効かないんですよね🤔
ifreme #sample p{
color: red;
}そこで調べていたところ、JavaScriptを使うことでiframe内の要素にCSSを当てることができることを知ったので、その方法をご紹介します。
目次
iframe内の要素にCSSを適用させる方法
ここでは、iframeを埋め込んでいるページを「親ページ」と呼びます。
iframe内の要素にスタイルを適用させる方法はいくつかあるようですが、ここでは次のご紹介します。
- JavaScriptを使用してiframe内の要素にアクセスする方法
- JavaScriptを使用して、iframe内でスタイルシートを読み込ませる方法 ←おすすめ
スタイルシートを読み込ませてしまえば、あとは通常通りCSSを記述するだけなのでわたしは今回後者を取り入れました。
JavaScriptを使用してiframe内の要素にアクセスする方法
親ページからJavaScriptを使用してiframe内の要素にアクセスし、スタイルを適用する方法です。
例えば、特定のiframe内の全ての<p>（段落）要素のフォントサイズを変更する場合、このようなHTMLだったとすると
<!-- サンプルのHTML -->
<iframe id="sample" src="" frameborder="0">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe Content</title>
</head>
<body>
<p>ここの文字が大きくなります。</p>
<p>ここの文字が大きくなります。</p>
</body>
</html>
</iframe>iframeスタイルを当てるためのJavaScriptコードはこちら。
$(function () {
$("#sample").on("load", function () {
$("#sample").contents().find("p").css("color", "red");
});
});ほんの少しだけスタイルを調整したい時なら良いと思いますが、JavaScriptに慣れている方でないとパッとコードが出て来なかったりコードが複雑化しやすいので、個人的にはこの後にご紹介するスタイルシートを読み込ませる方法がおすすめです。
JavaScriptを使用して、iframe内でスタイルシートを読み込ませる方法
外部ファイルでスタイルを管理することにはなりますが、CSSが長くなる場合はこちらがおすすめ。
※スタイルシートは事前（後でもいいけど）に用意して、サーバ上にアップしてください。
$(function () {
$("iframe").on("load", function () {
$("iframe")
.contents()
.find("head")
.append(
'<link rel="stylesheet" href="[スタイルシートのパス]" type="text/css">'
);
});
});
iframe内の要素にCSSを適用させる際の注意点
ご紹介した通り、iframe内の要素にCSSを適用させる方法はいくつかあります。
ただしこれらの方法は、Webページとiframe内のページが同じオリジン、つまり同じWebサイトから来ている場合にのみ機能します。
例えば、example.com のウェブページを見ていて、iframeもexample.com の別のページを表示している場合のみ、紹介した方法にてスタイルを適用させることができます。
iframeが別のWebサイト（例えば another-site.com）からコンテンツを表示している場合、セキュリティの問題によりスタイルを変更することはできないので、ご注意ください！
