1. 程式人生 > >FLEX與JS資料互動,以及Google外掛IFrame的使用

FLEX與JS資料互動,以及Google外掛IFrame的使用

       最近因為專案需要,用到的flex,同時需要與js做資料互動,同時還用到了Google的外掛IFrame,總結一點點自己的使用心得,其中很多資料都是在網上Google到的。

 

 

  • FLEX呼叫JS:

 

ExternalInterface.call("callJSMethod")

其中callJSMethod為js的函式名。具體的可以看FLEX的API,有詳細的說明。需要注意的是,該JS方法需要在引用該SWF檔案的JSP檔案中。即:有a.jsp,包含一個b.swf的object,在b.swf中只能呼叫a.jsp中的方法。如果想要操作其他jsp如何處理?下面會講到。

 

  • JS呼叫FLEX:

先需要在FLEX中註冊介面方法:

 

ExternalInterface.addCallback("flexMethod",flexMethod);

前一個引數為JS中呼叫的函式名稱,後一個為在flex中函式。具體的可以檢視API文件,有詳細的說明。

然後在JSP檔案中需要引用該swf檔案:

 

<object id="flexEdit" name="flexEdit" type="application/x-shockwave-flash" width="100%" height="100%" align="middle" >
	<param name="movie" value="../swf/flexEdit.swf" />
	<param name="quality" value="high" />
	<param name="wmode" value="transparent" />
	<param name="bgcolor" value="#ffffff" />
	<param name="allowscriptaccess" value="*">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="true" />
</object>

 

然後在JS中呼叫:

 

function callFlexMethod(){
	var flexObj = document.getElementById("flexEdit");
        var par = "";
        flexObj.flexMethod(par);}

 

 重點是需要獲取swf檔案的object,來進行操作。如果是非當前頁面需要操作swf呢?那麼就需要獲取這個含有swf的jsp,然後再進行操作。現在很多都用到了iframe,應該是能夠實現的。

 

  • FLEX彈窗

在FLEX中需要用到彈窗,使用也比較簡單,程式碼如下:

public static function addWin():void{
	//建立彈出窗體
	var openner:IFlexDisplayObject = PopUpManager.createPopUp(this,OpenWindow, true);
	//窗體居中
	PopUpManager.centerPopUp(openner);
}

 其中OpenWindow為需要彈出flex頁面,具體的可以看FLEX的API,說的很詳細。現在要說的是,使用Google的IFrame外掛在flex中巢狀jsp或html等頁面。使用也很簡單。

外掛地址 http://code.google.com/p/flex-iframe

使用方法,在flex的頁面中加入:

 

<flexiframe:IFrame id="testb" label="baidu"source="http://www.baidu.com" width="80%" height="80%" x="5" y="5"/>

具體引數設定可以自己去看慢慢研究。

現在需要說的兩個問題是

1.彈出或者引用的JSP頁面與FLEX互動的問題。

2.彈出或者引用的JSP頁面會遮蓋FLEX的問題。

  • 先說第一個,給力的網友給出瞭解決辦法。傳送門:http://www.iteye.com/topic/1130632
  • 再說第二個,IFrame也可以實現。重點就是,得到IFrame的ID,然後呼叫該IFrame的頁面的JS方法即可。已上面的程式碼為例,取到openner,然後做轉換,至於為什麼如此操作,小弟也不知,API也沒說,往哪位大神解決了,給點指點。
var ow=OpenWindow(openner);
ow.iframeID.callIFrameFunction("callJSPMethod");

 

iframeID為flex的OpenWindow頁面中iframe的ID。具體的引數,可以檢視API。

附上IFrame的原始檔,其中已加入解決遮蓋問題的程式碼。