台風きてますね！
夜中雨と風がすごくて、窓をたたく外の音で起きました…。
でも台風のおかげか少しだけ気温が下がって、先週よりは過ごしやすい感じ！
と、前置きはこの辺にしておいて、今回はクロスドメインのiframeをサイトに設置して
私の知識がないばっかりに、cssの調整を試みて結局どうにもならなかった話をかきます。笑
私のように、クロスドメインだとわかっていながら陥る人が世の中たくさんいるだろうと
思いこのブログを書くことにしました。
制作中のwebサイトに別ドメインのサイトを取り込む時、iframeが一般的に使用されていますよね。
例えば制作者ならだれもが埋め込んだことがあるfacebookやyoutube、googlemapもiframeなはずです。
youtubeに関してはオンラインでmp4に直してvideoタグで入れ込む方法も、主流になっているので
今回のようなことで困ることはあんまりないかもしれません。
今回問題だったのが、クロスドメインだったということ！
クロスドメインのiframeはheightとwidthが動的に変わらず、固定値になってしまうし
さらに中にstyleタグでcssがかいてあろうもんなら、これが触れないという問題が発生します。
私は縦横問題ではなく、今回はこの既存のcssを変更したくてこの問題にはまってしまいました。
クロスドメイン下ではDOMに触れないという制限があり、iframe内をjavascriptで触ることすらできない。
クラスを付与したくても、cssをheaad内に取り込みたくてもまったく反応しません。
とにかく、クロスドメインでは何をしても無駄！動かないのです！
これをしっかり頭に入れておいて、親のiframeをもうけてそこに指示をするという無理やりな
やり方があるのも事実ですが、おすすめはしません。
特に大きな案件では、ページ容量も重くなってしまいますしね…。
もちろん上記のことは同一ドメインなら可能なのでここは勘違いしないように！ですね(*’ω’*)
じゃあこういう場合どうすれば良いのかというと、以下のような方法があります。
ずべてのクロスドメインのiframeに適応できるわけではないのでそこは勘違いしないように
気をつけてください。
例えばこんなiframeのとき
<iframe id="iframeID" src="外部url"></iframe>
以下のJSでiframeのwindowオブジェクトでiframeへメッセージを送ります。
var iframeOBJ = document.getElementById('iframeID').contentWindow;
iframeOBJ.postMessage("メッセージ", 'iframeの外部url');
iframeでは、イベント’メッセージ’で待ち、メッセージが来たら以下の処理を実行します。
window.addEventListener('message', function(event){
if("メッセージを送る" == event.data ) {
/*ここのcssなどの処理をする*/
}
});
これで対応できるものもあるみたいです！
ぜひ試してみて下さい～