前の記事では、CG の友達が個別のページで複数のリンクオープン効果を実現するように要求してきたことを紹介しました。その中で、IE や他のツールバー（Yahoo、Google）などがポップアップウィンドウをブロックしてユーザーのブラウザで実現できない問題があります。前回の open メソッドを ShowModelDialog メソッドに変更する方法以外に、CG は今日、Flash/FLEX AS を使用してブラウザでポップアップウィンドウを強制する方法を共有します。この方法は、CG にとってはかなり悪質な方法の一つです。ほとんどのユーザーのブラウザは Flash のプラグインまたは ActiveX がインストールされているため、SWF ファイルを使用してポップアップウィンドウを実現することはできません。現在、ほとんどのユーザー、特に FF ユーザーは、ブラウザのセキュリティ設定でネットワークへのアクセスを許可しています。
AS には 2 つのバージョン、AS2 と AS3 がありますが、ここでは AS3 バージョンのみを具体的に説明します。AS2 の実装は比較的簡単で、AS2 のフラッシュファイルを作成し、次のコードをアクションに追加するだけです。
getURL("http://www.demo.com");
その後、対応する SWF ファイルを生成し、簡単に公開するだけです。この方法は非常に簡単ですが、セキュリティの問題を考慮する必要があります。ポップアップウィンドウの URL は、ポップアップウィンドウの URL のドメインと同じでなければならないため、http://www.demo.com/a.html からは demo.com のドメインのページのみがポップアップされます。それ以外の場合はスクリプトエラーが表示されます。
この方法は IE6 以下のバージョンで使用できますが、IE7 + では、Flash プレーヤーコントロールの wmode を window に設定する必要があることに注意してください。このモードは非 DOM ホストモードであり、そのコンテナに依存しないモードです。
以下では、AS3 バージョンの実装方法について具体的に説明します。AS3 では、getURL メソッドは flash.net パッケージの navigateToURL (url,target) メソッドに変更されています。最初のパラメータは URL で、2 番目のパラメータは開く方法です。ポップアップウィンドウの場合は "_blank" です。より便利に呼び出すために、CG は以下の AS3 コードを作成しました。Flash の ExternalInterface インターフェースを使用して、Flash でポップアップウィンドウをより柔軟に実現できるようにしています。デバッグのために、CG はクライアント側で実装する方法を使用しました。AS と JS の相互呼び出しのプロセスが明確にわかるようになっています。自分のサイトに配置する場合は、XML 読み込み方式を使用して実装することを検討してください。クライアント側では呼び出しプロセスを見ることができません。ここではコードを省略します。
また、Flash のセキュリティに注意する必要があります。AS でのクロスドメインアクセスには、クライアントでの許可要件が必要であり、すでに説明しましたが、AS3 ではより詳細な設定があります。
以下は AS3 コードで、FLEX3 でデバッグしています：
package {
import flash.display.Sprite;
import flash.external.ExternalInterface;
import flash.net.*;
public class IePopup extends Sprite
{
private var url ; // 開く URL を定義
private var target; // 開く方法
public function setUrl(str)
{
this.url = str;
}
public function getUrl()
{
return this.url;
}
public function setTarget(str)
{
this.target = str;
}
public function getTarget()
{
return this.target;
}
//constructor
public function IePopup()
{
this.register();
this.popup();
}
//register
private function register():void
{
//外部呼び出しを監視し、関数名はjsCall、コールバック関数名はjsCall
ExternalInterface.addCallback("jsCall",jsCall);
}
//popup
private function popup():void
{
var targetURL:URLRequest = new URLRequest(this.getUrl());
navigateToURL(targetURL,this.getTarget()); //ポップアップウィンドウを呼び出す
}
//jsCall
public function jsCall(url:String,tar:String = '\_blank'):void
{
if(url.length==0||tar=='')
return;
this.setUrl(url); //文字列を設定
if(tar.length==0||tar=='')
this.target=='\_blank'; //デフォルトは新しいウィンドウに設定
this.setTarget(tar);
this.popup();//ポップアップ
}
}
}
コードの説明：url と target のパラメータを取得および設定するための 2 つの変数を定義し、Flash クラスを構築するときにパラメータを取得するための関数名とコールバックメソッド名が自動的に登録されます。jsCall メソッドでは、JS から渡された 2 つのパラメータを取得し、条件を判断してポップアップウィンドウを表示します。
以下は一部の JS コードです：
var ready=false;
//Flash の ActiveX が準備できていますか？
function IsReady(){
return ready;
}
//Flash の ActiveX が準備完了
function Ready(){
ready=true;
}
//Flash オブジェクトを使用
function domJsCall(url) {
window ['IePopup'].jsCall (url); //IE 用
//document ['IePopup'].jsCall (url); // その他のブラウザ用
}
//XML を使用
function xmlJsCall(url){
var xmlCall = "";
xmlCall += url;
xmlCall += "";
window['IePopup'].CallFunction(xmlCall);
}
function jsCall(url){
if(IsReady()){
//2 つの方法
xmlJsCall(url); //XML
//domJsCall(url); //DOM
}
}
コードの説明：Flash オブジェクトが正常にロードされたかどうかをチェックするための変数を定義し、jsCall (url) をクライアント側で呼び出すために定義します。ここでは、2 つの呼び出し方法、DOM 方式と XML 方式を定義しています。XML 方式は、低バージョンのブラウザと Flash オブジェクトに使用できます。DOM 方式は比較的簡単ですが、本質的には同じです。Flash とそのコンテナは非同期通信を行うため、DOM 方式の呼び出しは DOM オブジェクトが XML 通信プロセスを隠蔽して実現するものです。CG はここで XML 方式を使用することをお勧めします。柔軟性が高いです。XML 呼び出しでは、次のルールを使用しています：
arguments の子ノードはパラメータリストと型です
上記の例のすべてのソースコードのダウンロードアドレス：http://www.lidaren.com/code/popup/src.zip