さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】iframeで読み込んだページにCSSを適応させる方法

Pocket
LINEで送る

iframe内に読み込んだページに親ページからCSSを適応させることは通常は出来ませんがJQueryを使えは実装することが出来ます。

親ページのhtml

<iframe id="childIframe" src="child.html"></iframe>

親ページのJQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function(){
    $('#childIframe').on('load', function(){
        $('#childIframe').contents().find('head').append('<link rel="stylesheet" href="style.css">');
    });
});
</script>

上記コードでiframe内に表示しているページの<head>内に「<link rel=”stylesheet” href=”style.css”>」を挿入することが出来ます。

※iframeが複数ある場合はIDでは無くclassにして「$(‘#childIframe’).on(‘load’, function(){」の部分を「$(window).on(‘load’, function(){」にして使用してください。

※上記コードはiframe内に読み込むページが親ページと同じドメイン内でなければ動作しません。

参考サイト

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容