iframeのonreadystatechangeを使う方法

用途・目的

iframeのonreadystatechangeメソッドはxmlHttpRequestなどでよく使われるので用法に関する情報は多数あるけれども、iframeエレメントの参照方法を気を付けないといけない点の説明が併記されていない場合も多いです。
……過去に何度も利用しているので知ってはいたけど正しいやり方を忘れていてハマったので教訓として残しておきます。

このページにはブラウザ上で動作テストするサンプルを用意してありますが、ブラウザ上ではiframe内にURLリンクやフォルダをドラッグ＆ドロップしてもiframeを含むページ自体から画面偏移してしまい、期待した結果が得られませんでした。
デスクトップなどにhtaファイルを作成して実行したところ、期待通りの結果が得られました。


ソース var fun=function(elem, str){ var div=document.getElementById('div'+elem.id.charAt(3)) div.innerText += ['id:'+elem.id, str, 'readyState:'+elem.readyState,'location:'+elem.location,'',''].join('\n') } // 発動しない ifr0.onreadystatechange = function(){ fun(this, 'グローバル変数のようにid値でエレメント取得') } // 発動しない window.frames.ifr1.onreadystatechange = function(){ fun(this, 'framesからエレメント取得') } // 発動する document.getElementById('ifr2').onreadystatechange = function(){ fun(this, 'getElementByIdでエレメント取得') }

サンプル var str=(function(){/* <div style="border:solid 1px #000;margin:30px;"> <iframe id=ifr0 style="width:50%;height:100px;"></iframe> <select id=sel0></select> <div id=div0 style="padding:5px;"></div> </div> <div style="border:solid 1px #000;margin:30px;"> <iframe id=ifr1 style="width:50%;height:100px;"></iframe> <select id=sel1></select> <div id=div1 style="padding:5px;"></div> </div> <div style="border:solid 1px #000;margin:30px;"> <iframe id=ifr2 style="width:50%;height:100px;"></iframe> <select id=sel2></select> <div id=div2 style="padding:5px;"></div> </div> <button onClick=" var getEI=function(id){return document.getElementById(id)} var fun=function(num, elem, str){ var div=getEI('div'+num) div.innerText += (div.innerText ? '\n\n' : '') + [ 'id:'+elem.id, str, 'readyState:'+elem.readyState, 'location:'+elem.location, 'location:'+window.frames[elem.id].location, 'location:'+getEI(elem.id).location ].join('\n') } var fun0=function(num, elem, str){ var sel=getEI('sel'+num), ops=sel.options, i=0, name, arr=[] for(name in elem){arr[i++] = name} for(var i=0,L=arr.sort().length;i<L;i++){ops[i] = new Option(arr[i])} sel.onchange=function(){ var prop=this.options[this.selectedIndex].text confirm( 'ifr'+num + '\n'+ 'prop:' + prop + ' = ' + elem[prop] + '\n'+ 'prop:' + prop + ' = ' + getEI('ifr'+num)[prop] ) } var fun1=function(){ var me=arguments.callee fun(me.num, this, me.str) } fun1.num = num fun1.str = str elem.onreadystatechange = fun1 getEI('div'+num).innerText = '' window['ifr'+num].location = 'about:blank' } fun0(0, ifr0, 'グローバル変数のようにid値でエレメント取得') fun0(1, window.frames.ifr1, 'framesからエレメント取得' ) fun0(2, document.getElementById('ifr2'), 'getElementByIdでエレメント取得' ) ">動作確認</button> */}+'').split('/*')[1].split('*/')[0] var doc=window.open().document doc.open() doc.write(str) doc.close()