Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

iframe 内のウィンドウから親ウィンドウの要素を操作するには!?

      2015/07/18

さて、ちょっと気になっていたiframeで読み込んだhtmlで実行したJavaScriptで親ウィンドウのDOM要素を操作さいてみよう!ってふと思ったのでそれを実験してみたのでメモしておきます。



コードとファイルの構成と流れ

今回はファイルを跨ぐので、ファイルごとのコードと説明を乗っけておきます。 

パターン1 iframe内にあるボタンをクリックしたら親ウィンドウのボックス要素の背景色を変える
パターン2 親ウィンドウのボタン要素をクリックしたら親ウィンドウのボックス要素の背景を変える

iframe内への記述になります。

iframe内から親ウィンドウの要素にアクセスできるか実験のためのボタンを設置

iframe内にjavascriptを記述して、そこから親ウィンドウの要素を取得できるかどうかのコード。

今回は、直接htmlファイルに記述しましたが外部ファイル化してもいいです。

親ウィンドウとなるhtmlファイルのコード

このファイルでは、親ウィンドウとなるのでiframeで読み込んだり、取得するためのボタンとボックスを配置

親要素にアクセスするには?

window.parent

ここが本題ですが(笑) javascriptで親のウィンドウにアクセスするにはwindowオブジェクトのparentプロパティで親ウィンドウへの参照を取得できます。

こちらは、あくまで、「自分を定義している親のウィンドウをオブジェクトとして指す時」になるので、今回の場合はiframeで読み込んだhtmlが親となる。

window.top

さて、topプロパティを載せた理由は実はwindow.topもまた親ウィンドウへ参照できるのですが、window.topの場合は「ウィンドウオブジェクトの階層における最上位のウィンドウを返します」ということです。

これは、window.parentの場合は、その直近の親(1階層上の親)を返すようですが、window.topの場合は最上級という点で少し変わってきます。

深い階層や複雑な構造になっているとよく分からなくなりますが、ブラウザ上のURLとして表示される、一番上のウィンドウを参照したい場合は有効です。

jQueryを利用した場合の注意点

jqueryを利用した場合でも親ウィンドウの要素へのアクセスは可能です。例えば、親ウィンドウのボタンにアクセスしたい時は、下記のようにするとアクセスできるようです

ただ一つ実際に検証してみたのですが、親ウィンドウとなるhtmlにもjqueryファイルがリンクされていないと動作しませんでした。

追記

iframeから親ウィンドウの操作ではなく、子ウィンドウを開いて「子ウィンドウから親ウィンドウの要素、親ウィンドウから子ウィンドウの要素を操作する」という記事を書きました。iframeではないのですが、気になった方はぜひ!

 - javascript, jquery , ,

     

Message

  関連記事

【JavaScript】連想配列の要素をソートして並び替えてみる

久しぶりにjQueryを業務で弄っています。で、リストの一覧をアルファベット順に …

【javascript】剰余(%)演算子を使って値が繰り返しループする処理をやってみた!

ちょっとプログラムで、配列の長さの値の範囲内で繰り返す値をどうすればいいのか検証 …

【jQuery】ブラウザのタブが非アクティブ時でもsetIntervalの挙動について!

丁度、jQueryで自動的にスライドさせて画像が切り替わり、ボタンをクリックする …

CSS3のアニメーションをjavascriptで実行する方法

よくCSS3でロールオーバーでアニメーションさせるのありますが、まぁそれは、普通 …

html5でドラッグ&ドロップでローカルからテキストファイルをアップロード

先日、ファイルの読み込みをやりましたが、今度はローカルからファイルを読み込む方法 …

【jQuery】mousemoveでチカチカした

jqueryでmousemoveで追従するツールチップを作成したときに、ツールチ …

【jquery】$.postを利用してCSVを読み込む

jQueryの$.postを利用してCSVを読み込む案件がありそうだったので、今 …

jQuery 1.7の on()で要素を削除して追加後もイベントを永続的に引き継ぐ

先日、とある案件である要素にclickイベントを設定していたのですが、削除する必 …

no image
jQuery で時間差でアニメーション

よくFlashでTween系のアニメーションでdelay効果で時間差で表示させる …

no image
jQuery で特定の要素のインデックス番号を取得 ~ツールチップ~

ツールチップを作成してロールオーバーが必要なときに、その要素がインデックスの何番 …