Flex IFrame使用详解

最新推荐文章于 2016-11-20 16:15:03 发布

yangtang_newton

最新推荐文章于 2016-11-20 16:15:03 发布

阅读量7.9k

点赞数

分类专栏： flex 文章标签： iframe flex function library button

本文链接：https://blog.csdn.net/yangtang_newton/article/details/7514317

版权

flex 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

(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.οncοntextmenu=stoped;
    </script>
</p>
</body>
</html>

yangtang_newton

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Flex IFrame使用详解

(1) IFrame使用方法: 1.下载swc库文件,导入lib,在页面拖入IFrame,添加IFrame的source属性即可嵌入网页! 2.修改html-template文件夹中,添加AC_OETags.js, 以便于确保浏览器兼容性! 3修改html-template文件夹中,index.template.html,
复制链接

扫一扫

专栏目录