home
スポンサーリンク
2016-11-15

Javascript(jQuery)でiframe内のイベントを親フレームで取得する

iframeを利用する上で、最も障害となるものの一つに、ページ間のJavascriptの連携のしにくさが挙げられます。

通常のWebページでは、windowオブジェクトは1つですから、何も考えることなく普通にwindowオブジェクトを使えば良いです。しかし、iframeを利用したWebページでは、iframeタグを記述した呼び出し元Webページ(親フレーム)と、iframeによって呼び出された呼び出し先Webページ(子フレーム)の、2つのwindowオブジェクトが生成されます。よって、それぞれを組み合わせて簡単に呼んだり変更したりといった記述が通常に比べ難しく、更に記述が煩雑になりがちです。

当然、iframeを使うと、親ページ内で一貫して利用しているイベントが、iframeのページ内でのみ、動作しなくなります。例えば、以下のような場合、子フレーム内でどれだけマウスを動かしても、親フレームではそのイベントを取得できません。

動かないデモ

子フレーム上でどれだけマウスを動かしても、コンソールに「マウス動いた!」と表示されることはないです。

これを解消し、子フレーム内でのイベントを親フレーム内で取得するには、以下のようにします(jQuery使用)。

動くデモ(jQuery有り)

jQueryを使わずに実装する場合は、以下のようにすればいいでしょう。

動くデモ(jQuery無し)

iframe、便利なんだか不便なんだかわかりませんね。

コメントを残す

スポンサーリンク
スポンサーリンク
ツイートする
シェアする
オススメする
ブックマークする
購読する