Kousei Ikeda/Blog

2009.10.26/Flash

[2010.09.20] chromeのバージョンアップにより、wmodeによってはpopupが開かなくなったり(参考記事)と、状況が変わってます。これは当時の記事なので現状と違う部分があります。すみません。

前回の記事「Flash、JavaScriptから新規ウィンドウをポップアップする際のブラウザ毎の挙動のまとめ」の続き。

Safariで、Flashから新規ウィンドウを開こうとしてwindow.openを使うとブロックされる。
サイズ指定等なしの普通の新規ウィンドウならnavigateToURL(url,”_blank”)を使えばいいけど、サイズ指定したい場合はどうしたらいいのか、という件です。

ネット上の情報を調査

前回もさらっと探しても見つからなかったのですが、まずはあらためて検索してみます。
グーグルで「flash ポップアップ safari」で検索。

FLASH (AS3.0)からポップアップ
Safariでのポップアップウィンドウ対策
AS3でポップアップウィンドウ(2009/春)
あと@_sakotsuさんに教えてもらったPopups Blocked in AS3 with navigateToURL()
とかを読みましたが、解決策は出てきませんでしたので、自分で作りました。

使い方

使い方は

//importしてもらって
import jp.ikekou.net.urlopener.URLOpener;

//urlのみ指定
URLOpener.open('http://google.com');
//url、target指定
URLOpener.open('http://google.com', '_blank');
//url、target、option指定
URLOpener.open('http://google.com', '_blank', 'width=200, height=200');

みたいなかんじです。これでSafariでもサイズ指定のポップアップができます
optionはJavaScriptのwindow.openに渡すオプションと同じ形式の文字列です。

他にも、自分が使うからつけた機能で

//Safariか?
URLOpener.isSafari; //return Boolean
//JavaScriptでalert出す
URLOpener.alert("xxx");

とかあります。おまけです。

実際の動作は、目指したのはHTMLのリンククリックでwindow.openを呼んだ時の各ブラウザの挙動と同じになるようにしてます。それについては前回の記事参照。
またnavigateToURLでいい場合は極力navigateToURLを使うこと(レスポンスが早いので)にしてます。

中で何してるかというと、こんなかんじです。
ExternalInterfaceからwindow.open呼んだら開かない。これはきっとユーザーアクションじゃないみたいな感じなんだ(と推測)。なのでこうしました。

function()
{
	//ダミーの要素作成しイベントハンドラ設置、内部にwindow.openを記述
	var E = document.createElement("div");
	E.onclick = function()
	{
		window.open(url, target, options);
	};
	//クリックイベント送出
	var evt = document.createEvent("MouseEvents");
	evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	E.dispatchEvent(evt);
}

これをExternalInterfaceで呼んでいます。
これで、SafariのポップアップブロックがONの場合でも、ポップアップします。

こんなやりかたどうなの?という気もしますが、自分の中ではひとつの問題が解決したので、公開します。JavaScriptの書き方こうしたほうがいいよ、という指摘はあったらお願いします。
イベント関係はIEとか違いそうですが、Safariの時のみ呼ぶ前提なのでこれで。

まだブラウザ毎の挙動の吸収とかテストが完全ではないかもしれませんが、今回のクラスのコアはSafariでサイズ指定のウインドウ開けたよーうれしいなー、ってとこなので。コメントもちゃんと入ってないです。
残りはぼちぼち完璧にしていきます。挙動おかしかったら教えてください。現状でも一応大丈夫だと思いますが。

実験用ページを作りました。 → 実験用ページはこちら。

Safariは「ポップアップウィンドウを開かない」にチェックを入れて試してもらわないと違いがわかりづらいかと思います。
このページを各ブラウザで開いてみて、試した結果がこちら(相変わらずIE7,8がないですがあとで足す予定です・・・)

IE6 FF Chrome Safari
URLNavigator.open(‘http://google.com’); 新規ウィンドウ 新規タブ 新規タブ 新規ウィンドウ
URLNavigator.open(‘http://google.com’, ”); 新規ウィンドウ 新規タブ 新規タブ 新規ウィンドウ
URLNavigator.open(‘http://google.com’, null); 新規ウィンドウ 新規タブ 新規タブ 新規ウィンドウ
URLNavigator.open(‘http://google.com’, ‘_self’); 自ウィンドウ 自タブ 自タブ 自ウィンドウ
URLNavigator.open(‘http://google.com’, ‘_blank’); 新規ウィンドウ 新規タブ 新規タブ 新規ウィンドウ
URLNavigator.open(‘http://google.com’, ‘_blank’, ”); 新規ウィンドウ 新規タブ 新規タブ 新規ウィンドウ
URLNavigator.open(‘http://google.com’, ‘_blank’, null); 新規ウィンドウ(optionオフ) 新規ウィンドウ(optionオフ) 新規タブ 新規ウィンドウ
URLNavigator.open(‘http://google.com’, ‘_blank’, ‘width=200, height=200′); 新規ウィンドウ(option指定) 新規ウィンドウ(option指定) 新規ウィンドウ(option指定) 新規ウィンドウ(option指定)

Safariでも指定サイズポップアップができてるはずです。

ダウンロード→URLOpener.zip

結論

Safariでも指定サイズのポップアップ、できたよ!

Flashなのに華やかな表現のネタじゃないし、基礎も基礎、実務で出会わないわけのない問題の解決ネタなので、激しく既出だったり、てんでおかしなことを言ってたら恥ずかしいものです。一応調査もしたし、そうでないことを願ってます!

2009.10.26追記

twitterで皆様に色々指摘頂いたので、追記・修正していこうと思います。
とりあえずWinでのOperaと、Macでのテスト一切できてなかったので、そこやらないと、と思ってます。
Mac持ってないけど・・・

2009.10.31追記

Operaのポップアップブロック、突破できない予感です。
でもまぁ、Operaの場合は「今ブロックしましたよ」という表示がちゃんと出るし(Safariは出ない)、
ユーザーに認知してもらうことができるという点でSafariほど問題はない、という落としどころにするしかないかな、と考えています。

2009.11.04追記

会社のMac版Safariでは開けました。