今月の初めに書いた投稿が、完全に勘違いだったので、削除して改めて書き直し。
jQuery(1.7.2)でiframeを動的に生成して、そのloadイベントを書いてたときに、どうしても理解できないことが一つあります。
たぶん、僕が無知なだけかもしれませんが・・・
// <a id="test" href="http://somewhere.url/">iframeにリンク先をロードさせる</a> // というような、HTMLがあって、 ;(function($) { $('a#test').click(function(ev) { ev.preventDefault(); ev.stopPropagation(); //クリックされたアンカータグのhref属性を保存。 var href = this.href; //デバッグ用のカウンタ var count = 1 //iframeを生成して、そこに読み込ませます。 var $iframe = $(document.createElement('iframe')).appendTo(document.body); //onloadイベントでチェック $iframe.load(function() { console.log([count++,this.src]); }); //普通に読み込むと、ログには [1,'http://somewhere.url/'] が表示されます。 $iframe.attr('src',href); //window.setTimeout(function(){$iframe.attr('src',href);},100); //しかし、IEやFireFoxだとsetTimeoutメソッドで強制的に非同期で読み込ませると、 //ログには・・・ //--------------------------- //[1,''] //[2,'http://somewhere.url/'] //--------------------------- //と表示され、2回コールされています。 //しかし、safariやchromeなどのwebkit系のブラウザでは1回しかコールされません。 }); })(jQuery);
単純にsrc属性を設定してロードした場合だと、どのブラウザでも1回しかコールされない。
だけど、setTimeoutを使用してロードを遅延(非同期)実行させると、IE/Mozilla系ブラウザは2回コールされる。
ただ、タイムアウトミリ秒を1とか10とかのようにすると1回しかコールされないときもある。
よく分からない。そういうものなの???