親ページからiframe内の要素にCSSを適用させる方法
親ページからiframe内にCSSを適用させる方法を紹介します。
１．問題点
次のような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を適用させる方法を紹介します。
ネットで調べてみるとサンプルが色々出回っているのですが、情報が古かったり動作しないものが多かったので、このエントリーですぐに使えそうなものを作ってみました。
２．親要素から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>３．解説
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()は、指定した要素の子要素全体（テキストノードも含む）を選択するメソッドです。
４．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です。
５．注意事項
クロスドメイン（親ページと子ページのドメインが異なる）の場合、この方法は適用できません。
Posted by yujiro このページの先頭に戻る
- jQuery+ajaxでモーダルのコンテンツを取得する方法
- jQueryでパスワードの表示・非表示を切り替えるサンプル
- jQueryでファイル選択時にプレビュー表示する方法
- ラジオボタンをjQueryで解除する方法
- テーブルのセルをポイントすると行と列を反転表示するjQueryプラグイン「Table Hover」
- jQueryで親ページからiframeのスクロールバーを非表示にする方法
- jQueryのカスタムビルドが簡単にできるサービス「jQuery Builder」
- jQueryでCSSをまとめて書き換える方法のまとめ
- jQueryで要素を削除する方法のまとめ
- jQueryでテキストを追加するたびにスクロールさせる方法
- jQuery.ajax()でファイルをアップロードする方法
- preventDefault()で無効にしたイベントを有効にする方法
- jQueryで要素数を取得する方法のまとめ
- jQueryやJavaScriptでパスワードフィールドの文字を表示する方法
- jQueryでフォームデータを送信する方法のまとめ
トラックバックURL
コメントする
greeting
