iframe内でcssを効かせる方法

WEBデザイン

jsで吐き出したiframe動画を埋め込む、ということがあったのですが、iframeをいじるということが今まであまりなかったので解決するまでにかなり時間を要してしまいました。そのときのメモです。

やりたいこと

コード
<script src="https://www.exsample.com/movie.js"></script>

出力
<iframe>〜</iframe> ←このcssを編集したい

iframe内を編集して、レスポンシブ対応や細かいデザインの調整(親ページ側とサイズ感や背景色を合わせるなど)をしたかったのですが、cssが効かずに困っていました。

スポンサーリンク

クロスドメイン(ドメインが異なる)ときは効かない

まず前提として、iframeの親(iframeを入れているページ)とiframe内の要素のドメインが違うと、編集することはできないそうです。

ここまでたどり着くのに時間かかった…汗

私は難しくてよくわからなかったものもあるのですが、抜け道はあるようです。

・iframeタグはcssがきく? ←私はできなかった・・

・jsでクロスドメイン通信を有効化する(全てのクロスドメインでできるわけではないようです)

iframeのクロスオリジンを倒す - Qiita
iframeで別ドメインを呼び出して操作したいiframeでクロスオリジン対応をする必要があったのでメモ。同じドメインでiframeを呼び出すことは問題ないが、異なるドメインをiframeで呼び…
スポンサーリンク

iframeでcssを効かせる方法

というわけで、上記をクリアしたらiframeでcssを編集する方法です。

jQueryでcssを適用する

ひとつめはjQueryでcssを挿入する方法です。親ページの内に記述します。
#iframeareaに適用したいエリアのidやclass、(‘p’)に実際にstyleを適用するタグやclass、.cssのところにstyleを入れます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('#iframearea').on('load', function(){
$('#iframearea').contents().find('p').css('color','red');
});
});
</script>

jQueryでcssを適用する

ふたつめはiframeの中のhtmlにスタイルシートを読み込ませる方法です。

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

あとで試してみよう。

タイトルとURLをコピーしました