Chromeとiframe & window.open with Hash(#) 1月22日, 2011

Safariを使っているので気づかなかったけど、Google Chromeを使うと起こる不思議な違いに出くわした。inline frame中からポップアップwindowを開くのに、

function test_open(url) {
  window.open(url, "popup", "width=300, height=30");  
}
-----
<a href="testData1.html#flg" target="popup"
 onclick="test_open(this);return false;">吾輩は猫であるN</a>

こんな形で呼ぶ時、Chromeでは、flg=flg1が普通に成功するように見えるのに、それ以外は探し損なう。これはSafariの動作とは異なる。

なぜだろう。理解できるまでは当面下記でしのぐか、2度開くのはちょっと無様だけど。

function test_open(url, position) {
  var win = window.open(url, "popup", "width=300, height=30");
  url += position;
  win.open(url, "popup");
}

[追記 2012-12-30]: 以前のバージョンでは2度開きでしのげていたので気づかずにいたが、久しぶりにチェックしたところ、Chrome-23.0.1271.101ではこの逃げもきかないようになっていた。同期に関連する問題だろう。Chromeは使っていないからいいことにしようと思いつつ、一応の手当はしておこう。親でハッシュタグをグローバル変数(下記ではshowme)に置いて、子からwindow.onloadで読むことにした。動作が不安定なのでsetTimeoutしている。

function init() {
    location.hash = ''; //何故か不可欠のこともあり不安定
    location.hash = opener.showme;
}
// window.onload = init; //何故かNGのこともあり不安定
window.onload = setTimeout(init, 100);

不安定だが、これが本来の手順に近いだろうししょうがない、ということでこんな風…

[再度追記 2013-01-05]: 「しょうがない」という中途半端な上の方法は止めた。ちょっと大きなページを読み込むと、ハッシュタグを探すのに成功したり失敗したりと動作が不安定になる。もうこの方法はあきらめ、タグ位置からの表示したいIDブロックを切り抜いてbodyと入れ替えよう。自分の環境では、Chromeへの対応としては、ポップアップを無くさない限りこれが最善のようだ。呼ばれる側で下記のように自分のbodyを書き換える。sliceしているのは、’#’がついてくる状況なので削っているもの。Safari, Chrome, Firefox, Operaで動作OKを確認した。

function init(){
      document.body.innerHTML =
           document.getElementById(opener.showme.slice(1)).innerHTML;
}
window.onload = init;