【JavaScript】iframe内の要素にCSSでレイアウトを変更する方法
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
iframeとはWebサイトの中で別のWebサイトのページを埋め込むためのタグです。ブラウザの検証ツールでソースを確認すると以下のようにiframe内のタグが出力されます。
こんな感じの構造になっていたら以下のようなCSSで指定できそうな気がしますね。
iframe .list__title{
color: red;
}でもiframe内のHTMLに対してはこんな感じの指定ではCSSを指定することは出来ません。
今回はiframe内のHTMLにCSSを指定する方法を解説したいと思います。
この記事は以下の HTMLソースを前提の解説したいと思います。
// index.html
<iframe src="test.html"></iframe>// test.html
<dl class="list">
<dt class="list__title">タイトル1</dt>
<dd class="list__body">内容1</dd>
</dl>
<dl class="list">
<dt class="list__title">タイトル2</dt>
<dd class="list__body">内容2</dd>
</dl>
<dl class="list">
<dt class="list__title">タイトル3</dt>
<dd class="list__body">内容3</dd>
</dl>この記事の目次を表示
iframe内の要素にCSSでレイアウトを変更する方法
iframe内のタグに直接CSSを指定する
iframe内のタグにCSSを指定する方法は以下のやり方で可能です。
$(function(){
$('iframe').on('load', function(){
$('iframe').contents().find('.list__title').({'color':'red'});
});
});iframe内の要素にスタイルシートで指定していったものと考え方は同じですね。スタイルシートでは出来ませんでしたが、JavaScriptであればこのような考え方でCSSを指定することが出来ます。
iframe内にスタイルシートを追加してレイアウトを変更する
もうひとつの方法がこちらです。
iframe内にスタイルシートを追加してレイアウトを変更する方法は以下のやり方で可能です。
$(function(){
$('iframe').on('load', function(){
$('iframe').contents().find('head').append('<link rel="stylesheet" href="iframe.css" type="text/css">');
});
});on('load')は読み込みが完了したタイミングで処理を実行する記述です。
上記サンプルソースはiframeの読み込みが完了したタイミングでiframe内のheadタグにstylesheetを追加する処理です。
後は通常通り同盟のスタイルシートにスタイルを指定すればレイアウト調整が出来ます。
iframe内の要素にCSSでレイアウトを変更する際の注意点
この記事で紹介した方法はクロスドメイン（iframeを埋め込むページとiframeで埋め込まれるページが異なる）の場合、適用することは出来ません。
クロスドメインでも操作する方法が無いか調べてみましたが、技術的に不可能なようです。外部ページから内部を書き換えて出来てしまうのはセキュリティ的によくないのかなと思いますね。
