Flex IFrame使用详解

最新推荐文章于 2014-11-11 10:04:00 发布

原创最新推荐文章于 2014-11-11 10:04:00 发布 · 8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #flex #function #library #button

flex 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何在Flex项目中使用IFrame加载HTML页面，并实现Flex与HTML间的双向通信。包括配置步骤、解决脚本超时问题及调用HTML页面中的JS函数。

(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>