Flex中嵌入HTML页面

来源：互联网发布：php打印直角三角形编辑：程序博客网时间：2024/05/16 17:26

组件下载

3.1添加到libs目录下

需要下载第三方组件 flex-iframe.swc，并添加到flex_libs中

3.2简单使用示例

3.2.1 网页或HTML页面嵌入

方式一:直接使用<code:IFrame>标签

1. //jsp/html文件嵌入到flex中（需要把flexiframe.swc放在项目的flex_libs下）

2. //Application标签内xmlns:code=http://code.google.com/p/flex-iframe/

3. <mx:HDividedBox x="0" y="10" width="100%" height="500">

4. <mx:Panel width="30%" height="500" layout="absolute">

5. </mx:Panel>

6. <mx:Panel width="70%" height="500" layout="absolute">

7. <mx:Canvas id="mapWindow"width="70%" height="100%" /> <!—此处可嵌入页面-->

8. <code:IFrame id="frm" source="file/XXX.html" height="100%" width="100%"/>

9. </mx:Panel>

10. </mx:HDividedBox>

方式二:在as文件中使用IFrame对象

1. package com.sinoservices.tes.dor.action

2. {

3. importcom.google.code.flexiframe.IFrame;

4. import com.sinoservices.tes.dor.view.VisibleDispatch;

5. public classVisibleDispatchAction extendsBaseAction{

6. /**

7. * @页面对象

8. */

9. public varview:VisibleDispatch;

10. /**

11. * @iframe 地图

12. */

13. publicvar mapIframe:IFrame;

14. /**

15. * @百度地图路径

16. */

17. public var url:String = “http://map.baidu.com/”;

18.

19. /**

20. *@Description : 创建嵌入地图框架

21. *@param : null

22. *@return ： null

23. *@Author: lixiang

24. *@Create Date: 2016-11-03

25. */

26. publicfunction createMapIframe():void {

27. mapIframe= new IFrame("mapIframe");

28. mapIframe.label= "map"; //嵌入页面标题

29. mapIframe.source= url; //嵌入网页地址或html页面路径

30. mapIframe.overlayDetection= true; //是否检测覆盖

31. mapIframe.width= this.view.mapWindow.width; //嵌入页面宽度设置

32. mapIframe.height= this.view.mapWindow.height; //嵌入页面高度设置

33. this.view.mapWindow.addChild(mapIframe); //将页面嵌入指定父控件

34. }

35. }

36. }

3.2.2 FLEX与js交互

l 在AS中使用callIFrameFunction函数调用js中的方法

AS中代码片段:

37. /**

38. *@Description : 定位位置

39. *@param : loc 位置信息实体对象

40. *@return ： null

41. *@Author: lixiang

42. *@CreateTime: 2016-11-15

43. */

44. public functionlocationXY(loc:LocationEntity){

45. var infoArr:Array =new Array();

46. infoArr.push(loc);

47. mapIframe.callIFrameFunction('locationXY',infoArr); //调用JS中的方法参数一:JS中方法名参数二:AS传递至JS中的参数（数组形式）参数三:AS调用JS方法完毕后，回调处理函数。

48. }

JS中代码片段:

49. //根据经度纬度位置坐标定位

50. function locationXY(arr){

51. for(var i =0;i<arr.length;i++){

52. var ar = arr[i];

53. var location =new BMap.Point(ar.etvdLongitude,ar.etvdLatitude); //创建点坐标

54. map.centerAndZoom(location, 19); //设置中心点坐标和地图级别 19最高级别

55. }

56. }

l 使用ExternalInterface.addCallback实现js中的方法

Flex里面使用ExternalInterface.call(“js函数名称”,参数)进行调用JavaScript方法，其返回的值就是Js函数所返回的值。

2.在初始化方法中使用ExternalInterface.addCallback(“注册的方法名”,As中的函数名)进行注册，“注册的方法名”可以再javascript中直接调用

3.在js中，就可以用document.getElementById(“Flash在Html中的ID”).注册的方法名（参数）进行调用，当然，默认”Flash在Html中的ID”就是Flex文件的名称

AS中代码片段:

1. ExternalInterface.addCallback("queryDriverGisDate",queryDriverGisDate);//绑定JS方法在AS中对应的回调函数参数一:绑定名称(可以自定义填写，JS代码调用此名称,则执行对应回调函数:例callMethod)参数二:处理js函数的回调函数。

JS中代码片段:

3. //地图初始化

4. function initialize(){

5. loginPage = 'TMSLogin';

6. map = newBMap.Map("container"); //创建地图实例

7. var point = newBMap.Point(121.27335, 31.197664); //创建点坐标

8. map.centerAndZoom(point,19); //初始化地图,设置中心点坐标和地图级别

9. map.enableScrollWheelZoom(); //开启地图缩放

10. map.addControl(newBMap.NavigationControl()); //地图平移缩放控件

11. map.addControl(newBMap.ScaleControl()); //比例尺控件

12. map.addControl(newBMap.OverviewMapControl()); //缩略图控件

13. }

14. var flex =this.parent.document.getElementById(loginPage);//全局变量

15. //获取此对应标注车辆今日所有允许轨迹坐标,并播放轨迹回放

16. function attribute(e){

17. var p = e.target;

18. //根据车牌号查询此车的当日运行轨迹坐标数据

19. flex.queryDriverGisDate(p.licensePlateNumber);

20. }

参考文献: http://wkcause.iteye.com/blog/1891706 http://blog.csdn.net/zjt107/article/details/7341944

阅读全文

0 0