您的位置：首页 > 其它

Flex IFrame使用详解

2012-04-26 14:48 411 查看

(1) IFrame使用方法:
1.下载swc库文件,导入lib,在页面拖入IFrame,添加IFrame的source属性即可嵌入网页!
2.修改html-template文件夹中,添加AC_OETags.js, 以便于确保浏览器兼容性!
3修改html-template文件夹中,index.template.html, 这里在比默认的index页面多加入了参数,生成IFrame时会用到!

(2) IFrame注意事项:
1.确保以上3条不缺少!
2.调用嵌入页面js函数时,不加时间处理,会弹出Error #1502 脚本的执行时间已经超过了 15 秒的默认超时设置的提示!
(3) JS调用flex中的函数

flex定义：ExternalInterface.addCallback("callFlexshow",showMenu);

public function showMenu()

{

topmenu.enabled=true;

leftcont.width=197;

}

js调用： WebMain.callFlexshow(); // WebMain 是flash的object id

(4)调用iframe内部的页面JS:

测试页面CallHtmlFunctions代码:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:flexiframe="com.google.code.flexiframe.*"

minWidth="955" minHeight="600"

chromeColor="#55FF55" backgroundColor="#20B203"

pageTitle="调用 iframe srource中的js函数" >

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Style>

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

@namespace iframe "http://code.google.com/p/flex-iframe/";

</fx:Style>
<fx:Script>

<![CDATA[

import mx.controls.Alert;

//调用一个简单的js函数

private function callShowAlert():void

{

iFrame.callIFrameFunction("showAlert");

}

//调用一个有参js函数

private function showAlertWithParameter():void

{

iFrame.callIFrameFunction("showAlertWithParameter",[txtPrar.text]);

}

//调用一个有返回值的js函数

private function callGetCurrentDate():void

{

iFrame.callIFrameFunction("getCurrentDate", null, handleResult);

}

//处理内联页面中js函数的返回值

private function handleResult(result:Object):void

{

iFrame.callIFrameFunction("showIFrame");

iFrame.callIFrameFunction("showDiv");

Alert.show("返回结果为: \r\n" + result,"Flex提示",Alert.OK);

}

]]>

</fx:Script>

<mx:ApplicationControlBar width="100%" dock="true" borderVisible="false">

<mx:Text selectable="false">

<mx:htmlText>

<![CDATA[

<font color="#000000" size="20"><b>flex-iframe - 一个调用内联框架的js函数的例子</b></font>

本例子展示如何在flex页面中,使用内联页面内的js函数的方法...

]]>

</mx:htmlText>

</mx:Text>

</mx:ApplicationControlBar>

<mx:HBox id="hbox" horizontalCenter="0" width="100%" horizontalAlign="center"

backgroundColor="#ffffff" borderVisible="false">

<mx:Button click="callShowAlert()"

label="调用内联页面js函数"/>

<s:TextInput id="txtPrar" text="请输入参数..." focusIn="{txtPrar.text=''}"/>

<mx:Button click="showAlertWithParameter()"

label="调用内联页面js函数,并传入参数"/>

<mx:Button click="callGetCurrentDate()"

label="调用内联页面js函数,并得到一个返回值"/>

</mx:HBox>

<flexiframe:IFrame id="iFrame" width="100%" height="100%"

label="Map"

source="assets/html/htmlSource.html"

overlayDetection="true" borderVisible="false">

</flexiframe:IFrame>

</s:Application>

htmlSource.html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">



</style>

</head>

<body>

<div>

<div align="center">

<p><strong>这里是一个被链接到的web Html</strong></p>

<p align="left">应用该例子时:</p>

<ul>

<li>

<div align="left"><p>1.导入flex-iframe-*.swc,作用:添加对iframe的引用!</p></div>

</li>

<li>

<div align="left"><p>2.html-template中,添加AC_OETags.js,作用:确保兼容性!</p></div>

</li>

<li>

<div align="left"><p>3.html-template中,修改index.template.html,用于:添加对参数变量的获取!</p></div>

</li>

</ul>

</div>

</div>

<p>

<script type="text/javascript">

var index=0;

var returnValue;

//一个弹出警告框的例子,这样可以避免了脚本的执行时间已经超过了 15 秒的默认超时设置的提示
function showAlert()

{

index=0;

setInterval("isShowwing()",1);

}

//其实在这里弹框

function isShowwing()

{

index++;

if(index==1)

{

//url="http://www.baidu.com/";

//returnValue=window.showModalDialog(url,[],"dialogHeight=400px; dialogWidth=800px;status=no");

alert("source页面中弹出的一个提示框, \r\n\r\n看清了可不是flex的提示!");

}

}

//一个有参数的例子

function showAlertWithParameter(parameter)

{

alert("你往页面中出入的参数是: \r\n"+parameter);

}
//返回一个值到flex

function getCurrentDate()

{

var currentDate=new Date();

return "当前时间..."+currentDate.getFullYear()+"年"+(currentDate.getMonth()+1)+"月"

+currentDate.getDate()+"日 "+currentDate.getHours()+":"+currentDate.getMinutes()+":"+currentDate.getSeconds();

}

//屏蔽页面中恶心人的右键

function stoped()

{

return false;

}

document.oncontextmenu=stoped;

</script>

</p>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航