???(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("返回结果为:??? rn" + 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">
???<!--
???body {
????background-image: url(bg.jpg);
???}
???body,td,th {
????font-size: 18px;
????color: #00FFFF;
????font-family: 华文楷体;
???}
???-->
??</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中,作用:确保兼容性!</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页面中弹出的一个提示框,??? rnrn看清了可不是flex的提示!");
??????? ?}
??????? }
???????
??????? //一个有参数的例子
??????? function showAlertWithParameter(parameter)
??????? {
??????????? alert("你往页面中出入的参数是:??? rn"+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>
