Flash、JavaScriptから新規ウィンドウをポップアップする際のブラウザ毎の挙動のまとめ
2009/10/24 11:56
Flashから他のアドレスに飛んだり、新しい画面を開く方法は主に2つ。
- navigateToURL(url, target);
- ExternalInterface.call(”window.open”, url, target, options);
だと思います。
そしてオプションを指定することはnavigateToURLではできない、と思ってます。
いやもっとあるよ、オプション指定もできるよ、となると記事の前提が崩れますが、調べても出てこなかったので、たぶん主にそんなもんだと思いますし、そういう前提で話を進めます。
試してみると、そもそもHTMLをクリックしてJavaScriptのwindow.openを呼んだ場合も含めてブラウザによって挙動が違うので、表にしました。
JavaScript
まずはJavaScript。JavaScriptは本職じゃないので完全に非のない書き方かどうかわかりませんが、とりあえずこういう記述です。
xxx
このonclickに、以下のパターンを入れて試しました。
window.open('http://google.com');
window.open('http://google.com', '');
window.open('http://google.com', null);
window.open('http://google.com', '_self');
window.open('http://google.com', '_blank');
window.open('http://google.com', '_blank', '');
window.open('http://google.com', '_blank', null);
window.open('http://google.com', '_blank', 'width=200, height=200');
引数に空白文字列入れたり、null入れたり、無駄っぽい、重複っぽいこともしてますが、調査なので見逃してください。
実際に押せるリンクはこちら。
window.open(’http://google.com’);
window.open(’http://google.com’, ”);
window.open(’http://google.com’, null);
window.open(’http://google.com’, ‘_self’);
window.open(’http://google.com’, ‘_blank’);
window.open(’http://google.com’, ‘_blank’, ”);
window.open(’http://google.com’, ‘_blank’, null);
window.open(’http://google.com’, ‘_blank’, ‘width=200, height=200′);
いろんなブラウザで押してみました。
以下、表内の表記は
- 新ウ=新規ウィンドウ
- 新タ=新規タブ
- option指定=width等が指定された状態
- optionなし=ツールバーやステータスバーに関する指定にoffが渡されたのと同じような状態
とします。
この表にはIE7、IE8、Opera、がないじゃないかという声もあると思います。
今の環境に入っていないのですが、会社で試した感じではFFに近い挙動です。
また会社ででも実験して追記します。
JavaScriptの結果
| window.open(下の文字列); | IE6 | FF | Chrome | Safari |
|---|---|---|---|---|
| ‘http://google.com’ | 新ウ | 新タ | 新タ | 新ウ |
| ‘http://google.com’, ” | 新ウ | 新タ | 新タ | 新ウ |
| ‘http://google.com’, null | 新ウ | 新タ | 新タ | 新ウ |
| ‘http://google.com’, ‘_self’ | 自ウ | 自タ | 自タ | 自ウ |
| ‘http://google.com’, ‘_blank’ | 新ウ | 新タ | 新タ | 新ウ |
| ‘http://google.com’, ‘_blank’, ” | 新ウ | 新タ | 新タ | 新ウ |
| ‘http://google.com’, ‘_blank’, null | 新ウ(optionオフ) | 新ウ(optionオフ) | 新タ | 新ウ |
| ‘http://google.com’, ‘_blank’, ‘width=200, height=200′ | 新ウ(option指定) | 新ウ(option指定) | 新ウ(option指定) | 新ウ(option指定) |
結果は第3引数にnullを渡したときにブラウザによって違いが出るようです。
特にIEとFFが、第3引数を省略した時や空白文字列を渡した時とは異なる動作をしました。
optionオフというのは、実際に見てもらうのが早いかと思いますが、optionにmenubar=no等をすべてオフ指定した場合のようなものものが出ます。
ActionScript : navigateToURL
次にFlashのnavigateToURLを使用する場合です。
こちらはtarget=”_blank”等の指定はできるものの、widthやheight、menubar等の指定はできません。(と思い込んでいますが実はできる?)
よって項目が少し減ります。
記述はこんな感じです。
navigateToURL(new URLRequest('http://google.com'));
navigateToURL(new URLRequest('http://google.com'), '_self');
navigateToURL(new URLRequest('http://google.com'), '_blank');
ActionScript : navigateToURLの結果
| navigateToURL(下の文字列); | IE6 | FF | Chrome | Safari |
|---|---|---|---|---|
| new URLRequest(’http://google.com’) | 新ウ | 新タ | 新タ | 新ウ |
| new URLRequest(’http://google.com’), ‘_self’ | 自ウ | 自タ | 自タ | 自ウ |
| new URLRequest(’http://google.com’), ‘_blank’ | 新ウ | 新タ | 新タ | 新ウ |
まあまあ、そんな感じですね。特に挙動に違いはありません。
ActionScript : ExternalInterface
次にExternalInterface経由でwindow.openを呼んだ場合。
記述はこんな感じです。
ExternalInterface.call('window.open', 'http://google.com');
ExternalInterface.call('window.open', 'http://google.com', '');
ExternalInterface.call('window.open', 'http://google.com', null);
ExternalInterface.call('window.open', 'http://google.com', '_self');
ExternalInterface.call('window.open', 'http://google.com', '_blank');
ExternalInterface.call('window.open', 'http://google.com', '_blank', '');
ExternalInterface.call('window.open', 'http://google.com', '_blank', null);
ExternalInterface.call('window.open', 'http://google.com', '_blank', 'width=200, height=200');
ActionScript : ExternalInterfaceの結果
| ExternalInterface.call(’window.open’, 下の文字列); | IE6 | FF | Chrome | Safari |
|---|---|---|---|---|
| ‘http://google.com’ | 新ウ | 新タ | 新タ | 無視 |
| ‘http://google.com’, ” | 新ウ | 新タ | 新タ | 無視 |
| ‘http://google.com’, null | 新ウ | 新タ | 新タ | 無視 |
| ‘http://google.com’, ‘_self’ | 自ウ | 自タ | 自タ | 自ウ |
| ‘http://google.com’, ‘_blank’ | 新ウ | 新タ | 新タ | 無視 |
| ‘http://google.com’, ‘_blank’, ” | 新ウ | 新タ | 新タ | 無視 |
| ‘http://google.com’, ‘_blank’, null | 新ウ(optionオフ) | 新ウ(optionオフ) | 新タ | 無視 |
| ‘http://google.com’, ‘_blank’, ‘width=200, height=200′ | 新ウ(option指定) | 新ウ(option指定) | 新ウ(option指定) | 無視 |
ここらに来て結果が割れました。
まず、IE、FFは第三引数まわりで、最初に試した、HTMLからJavaScriptを呼んだ場合と同じ動作をします。
ExternalInterfaceでJavaScriptを呼んでるので当たり前と言えば当たり前です。
Safariの話
しかし、Safariが、新規ウインドウ系をのきなみブロックします。
これはHTMLからの呼び出しとは挙動が違います。
もちろんこれはポップアップブロックONの場合です。
OFFにしてもらえばいいじゃん、と言ってしまうと話が終わってしまうのですが
初期ダウンロード時にONであるということと、
IE等のポップアップブロックと違って完全にサイレント、何も画面に変化がなくブロックされてしまうのでブロックされていることにユーザーが気づいてすらくれない、という可能性があるので、やはりON時でもなんとかすることに意味があると考えます。
(完全に推測ですが、SafariではFlashで言うユーザーアクションにひもづかない新規ウィンドウオープンはブロックする仕様で、
かつFlash内からの呼び出しがユーザーアクションにひもづいていると認識してもらえてないのではないでしょうか。)
そのほか
調べていて他に気になったことと言えば、
- HTMLからの呼び出し、Flashからの呼び出しともに、window.openで_selfを指定すると、遷移後の戻るボタンで何故か2回分戻る?気がする。実際ネットにもそういう情報があった気がする。
- その現象はnavigateToURLでは起きない
- ExternalInterfaceのwindow.openは、レスポンスが極端に悪い。特にSafariは、_selfは機能するが一見機能してないのではと思う程に遅れる
という点です。
結論
これらを考えると、Flashからページ移動、または新規ウィンドウのオープンをする場合
- navigateToURLとwindow.openで結果が同じものはnavigateToURLを使う。理由は以下。
- window.openよりnavigateToURLのほうがレスポンスが良い
- window.openでは先述の戻るボタン問題が起きるブラウザがあるが、navigateToURLではおきない
- 新規ウィンドウに対してオプション指定したい場合はwindow.openを使う。(navigateToURLじゃできないし)
- Safariで新規ウィンドウに対してオプション指定して開きたい場合、なんとかする。
というのが、現状とるべき対応なのかと。
とはいえ、これはいちいち判断するのは面倒。それにSafariでなんとかするって、どうするのか。
たとえば、開かれるほうのウィンドウに記述を入れるとできるらしいです。
でも、開く先が既存ページで、自分ではさわれなかったり、数が多かったりすると面倒だなと感じました。
なんとかできるに越したことはないと。
ネットの情報では基本的にできない、あきらめてnavigateToURLで_blankでやる、呼ぶ側ではなく開き先のほうで記述を入れる、等ありましたが、根本的にやる方法は出てきませんでした。
なので、なんとかならないか試してみたいと思います。
10月 26th, 2009 at 02:45
[...] 前回の記事「Flash、JavaScriptから新規ウィンドウをポップアップする際のブラウザ毎の挙動のまとめ」の続き。 [...]