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

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

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

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

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

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

Box1の背景色を変える

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

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

window.addEventListener("load",function(){
	
	//iframe内のボタン
	var btn1=document.getElementById("btn");
	
	//親ウィンドウにあるボタン!
	var btn2=window.parent.document.getElementById("btn2");
	
	//親ウィンドウにあるbox1の要素
	var box1=window.parent.document.getElementById("box1");
	
	//親ウィンドウにあるbox2の要素
	var box2=window.parent.document.getElementById("box2");
	

	
	btn1.addEventListener("click",function(){
		box1.style.backgroundColor="#ff0000";
	},false);
	
	btn2.addEventListener("click",function(){
		box2.style.backgroundColor="#ffff00";
	},false);

	
},false);

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

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

Box2の背景色を変える


  

   　
Box1
   　
frame内のボタンより色を変える
　　

　　

  　
Box2
  　
親ウィンドウのボタンより色を変える
　　
    

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

window.parent

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

//親ウィンドウを取得
var parentWin=window.parent;

var box1=parentWin.document.getElementById("box1");

//直接アクセスした場合
var box1=window.parent.document.getElementById("box1");

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

window.top

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

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

//最上級である親ウィンドウを取得
var parentWin=window.top;

var box1=parentWin.document.getElementById("box1");

//直接アクセスした場合
var box1=window.top.document.getElementById("box1");

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

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

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

//パターン1
parent.$("p#btn");

//パターン２
$("p#btn",parent.document);
});

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

追記

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