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的原始檔,其中已加入解決遮蓋問題的程式碼。