kano

リンクを別窓で開いた時の検証

AS3を使用し、リンクを別窓で開きたいときに、
IEで見るとリンクがポップアップブロックに邪魔されてしまうことがあります。

よく知られた問題ですがいつも忘れてしまうため、その辺りの挙動を備忘録としてまとめておきます。

■wmode

FlashをHTMLに埋め込む際に、wmodeというパラメータを指定することが出来ます。
各パラメータとその際の表示のされ方は以下のようになります。

window (デフォルト) : Flashを常に最前面に表示 opaque : HTMLが前面に出る事もあり + 背景透過なし transparent : HTMLが前面に出る事もあり + 背景透過あり

LightBox的な表現などで、Flashより前面にHTMLコンテンツを表示する場合、
wmodeがデフォルトのwindowのままですとFlashが最前面に表示されてしまいます。
その場合はopaqueやtransparentなどに設定するとHTMLで指定した重なり順で表示する事が出来ます。

しかし、wmodeをopaqueやtransparentにすると、日本語が入力できなくなってしまったりと、
不具合が生じる場合があります。
IEによるポップアップブロックもその一つです。

■リンク方法

AS3では、navigateToURLを使用してリンクを貼る事が多いかと思いますが、
ExternalInterfaceを使用し、JavaScriptのwindow.openでもリンクをさせる事が出来ます。
このExternalInterfaceを使用する事により、ポップアップブロックを回避する事が出来ます。

では、wmodeとリンク方法の組み合わせにより、各ブラウザでどのような動きとなるのでしょうか。
ついでに、ポップアップの表示も一緒に検証してみます。

■検証コード

今回検証したコード
(コードはメインタイムラインに直接書きました。)

(1)navigateToURL

btn1.buttonMode = true;
btn1.addEventListener(MouseEvent.CLICK, function(){
    navigateToURL(new URLRequest("http://www.tam-tam.co.jp"), "_blank");
});

(2)ExternalInterface

btn2.buttonMode = true;
btn2.addEventListener(MouseEvent.CLICK, function(){
    ExternalInterface.call('function(url){window.open(url, "_blank");}', "http://www.tam-tam.co.jp");
});

(3)ポップアップ

btn3.buttonMode = true;
btn3.addEventListener(MouseEvent.CLICK, function(){
    ExternalInterface.call("function(url,name,w,h){window.open(url,name,'width=500,height=500');return false;}", "http://www.tam-tam.co.jp", "tam", 500, 500);
});

■検証結果

  window opaque transparent
chrome13      
(1)
(2)
(3)
safari5      
(1)
(2) ×
(3) ×
FireFox      
(1)
(2)
(3)
IE8      
(1) × ×
(2)
(3)
IE7      
(1) × ×
(2)
(3)
IE6      
(1) × ×
(2)
(3)

※Windows XP SP3にて検証

主にIE以外は問題なかったのですが、意外な事に、winのsafari5.0では、
wmodeがwindowの時に、ExternalInterfaceを使用したリンクが効きませんでした。
その部分以外は想定どおりの動きと言えます。
macではSafari、Firefox、Chrome、全て問題ありませんでした。

■まとめ

基本的にはExternalInterfaceでのリンクを使用しておけば問題はなさそうですが、
safari5の例もありますので、ブラウザを判別してリンクを切替えた方が全てに対応できそうです。
ですが、wmodeの設定、対象ブラウザ、リンクの方法、などを事前に確認しておいた方がよさそうです。

・参考
FLASH (AS3.0)からポップアップ – ENDLESS_BLANK
http://endlessblank.com/blog/2009/06/popupfromflash.html
ActionScriptでブラウザ判定をする | helog
http://helog.jp/flash/actionscript3/216/

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら