jQueryを使ってiframeの中から親ウィンドを操作する

投稿日時：2014年06月27日(金) カテゴリー：javascript

この間iframeの中の高さを取得して、呼び出しているiframeタグにに高さを割り当てたいけど
ネットに落ちてるプラグイン使うの禁止ということで自分で書かざるを得なくなりました、、、
ただし、jqueryは使ってよいとのことだったので、思ったよりも簡単に解決！

たとえばこんなソースがあったとします

<html>
<head>
</head>
<body>
<div id="wrapper">
    <iframe src="/MaMoTaKu.html">
</div>
</body>
</html>

iframeの中の高さは、使うタイミングによって違うけれども読み込んだ後に代わることがないのであればこのjsを使えばいけるはず！
(※iframeの中で読み込む、今回だったらMaMoTaKu.htmlの中へ)

function getIframeHeight() {
    parent.$("#iframe").height($(window).height());
}
$(document).ready(function() {
    getIframeHeight();
});

これだけです！笑
ここで重要なのは「parent」君です！
彼は親(今回はiframeを呼び出しているファイル)に対して指示ができるので、
このような使い方が出来ます！

追加があるとしてもおそらく
iframe内のリンクを押したら高さを測り直さなきゃいけないとかかな？
(他にも、iframeを呼び出しているhtmlがレスポンシブだと
いろいろjavascriptを増やさないといけないけど、それに関しては呼び出している方のjsのしごとだからここでは無視笑)
まあクリックした後のこと考えるだけでいんならこれ追加すればいんじゃね？

function hogehoge() {
    var hoge = hogehoge;
    getIframeHeight();
    return false;
}

(リンクをクリックしたらhogehogeが実行されるものとしてます。)

まあ、他に出てきてもiframeの何かした後に親に命令したいときは「parent」を使えば何でもできるっしょ！
（親からiframeの中に命令することはできないっぽいけど、、、）