iframeで読み込まれているHTMLにCSSを適用させるjQuery

FRONTEND

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>

related posts