iframeで読み込まれているHTMLにCSSを適用させるjQuery
2020.01.16
とある案件で、iframeで読み込んで表示させるページにCSSを適用させる必要がありました。
読み込まれている方のページのHTMLを書き換えることが出来るのであれば、全く問題は無いのですが、今回のケースはGoogleカレンダーの埋め込み。読み込むHTMLを書き換えたり出来るはずがありません。
で、調べてみたら、どうやらjQueryをつかうことでiframeで読み込むページにも自由にCSSを適用させることが出来るとのこと。試してみたら簡単に実装出来たので今回記事にしてみます。
昔ほどiframe自体あまりつかわなくなりましたが、あまり知れらていない方法だと思うので(僕が知らなかっただけかもしれないですが・・・)、覚えておいて損は無いかと思います。
実装方法
html
読み込む方のページのHTMLに記述するiframeはこんな感じです。
<iframe id="frame" src="~.html"></iframe>
jQuery
例として「id=”frame”」が振られたiframeに、「style.css」を適用させています。CSSのパス、ファイル名は適宜修正してください。
これで、iframeで読み込んでいるページの<head>に「<link rel=”stylesheet” href=”style.css”>」を挿入することが出来ます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function(){
$('#frame').on('load', function(){
$('#frame').contents().find('head').append('<link rel="stylesheet" href="style.css">');
});
});
</script>
複数のiframeにもつかえる
今回の案件では「埋め込まれた2つのGoogleカレンダーの見た目を同じにする」ということが必要でした。このように複数のiframeに同じCSSを適用させたい場合はidをclassに書き換えてください。
html
<iframe class="frame" src="~1.html"></iframe>
<iframe class="frame" src="~2.html"></iframe>
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function(){
$('.frame').on('load', function(){
$('.frame').contents().find('head').append('<link rel="stylesheet" href="style.css">');
});
});
</script>