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>
あとで試してみよう。