親ページからiframe内の要素にCSSを適用させる方法

親ページからiframe内の要素にCSSを適用させる方法

Posted at March 3,2015 12:55 AM
Tag:[iframe, jQuery]

親ページからiframe内にCSSを適用させる方法を紹介します。

1.問題点

次のようなHTMLがあるとします。

index.html(親ページ)

<iframe id="test" src="test.html"></iframe>

test.html(iframeで呼び出すページ)

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <p>test</p>
  </body>
</html>

で、iframe内に表示させるページのp要素にindex.htmlからcssを設定したいのですが、方法が分かりません。

ということで、親ページからiframe内の要素にCSSを適用させる方法を紹介します。

ネットで調べてみるとサンプルが色々出回っているのですが、情報が古かったり動作しないものが多かったので、このエントリーですぐに使えそうなものを作ってみました。

2.親要素からiframe内の要素にCSSを適用させる

親要素からiframe内の要素にCSSを適用させるには次のようなjQueryをindex.htmlに追加します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
    $('#test').on('load', function(){
        $('#test').contents().find('p').css('font-size','150%');
    });
});
</script>

3.解説

jQueryでiframe内を操作する場合、iframeのページ読み込みが完了するのを待つ必要があります。

そこで、

$('#test').on('load', function(){ ... }

という風に、iframeのid属性値「test」に対しon()メソッドでloadイベントを待ち合わせることで、iframeページ読み込みが完了した時点でloadイベントが発火するようにします。

そしてブロック内にある、

$('#test').contents().find('p').css('font-size', '150%');

でiframe内の要素のCSSを変更します。

contents()は、指定した要素の子要素全体(テキストノードも含む)を選択するメソッドです。

4.iframe内にスタイルシートを追加する

iframe内にスタイルシートを追加するには、3項のサンプルから赤色部分のように変更します。

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

append()を使って、head要素にlink要素を丸ごと追加すればOKです。

5.注意事項

クロスドメイン(親ページと子ページのドメインが異なる)の場合、この方法は適用できません。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)