[zz]Flex组件IFrame中嵌入HTML页面的步骤

[zz]Flex组件IFrame中嵌入HTML页面的方法

<?xml version="1.0" encoding="utf-8"?><mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" resize="callLater(moveIFrame)" move="callLater(moveIFrame)"> <mx:Script> <![CDATA[ import flash.external.ExternalInterface; import flash.geom.Point; import flash.net.navigateToURL; private var __source: String; /** * Move iframe through ExternalInterface. The location is determined using localToGlobal() * on a Point in the Canvas. **/ private function moveIFrame(): void { var localPt:Point = new Point(0, 0); var globalPt:Point = this.localToGlobal(localPt); ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height); } /** * The source URL for the IFrame. When set, the URL is loaded through ExternalInterface. **/ public function set source(source: String): void { if (source) { if (! ExternalInterface.available) { throw new Error("ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required."); } __source = source; ExternalInterface.call("loadIFrame", source); moveIFrame(); } } public function get source(): String { return __source; } /** * Whether the IFrame is visible. **/ override public function set visible(visible: Boolean): void { super.visible=visible; if (visible) { ExternalInterface.call("showIFrame"); } else { ExternalInterface.call("hideIFrame"); } } ]]> </mx:Script></mx:Canvas>?

２、放置到要使用框架的Flex中index.mxml，并写入引用哪个frame.html

<ui:IFrame id="iFrame" source="frame.html" visible="true" width="100%" height="300"/>

３、在引用框架的Flex生成页index.html里加入：

? ? ?<1. wmode set to opaque

? ? ?在调用swf的后面加上"wmode","opaque"

? ? ?例如："pluginspage", "http://www.adobe.com/go/getflashplayer",

? ? ? ? ? ?"wmode","opaque"

? ? ?<2. the moveIFrame,hideIFrame,showIFrame,loadIFrame methods

? ? ?<script language="JavaScript" type="text/javascript">

<!--// -----------------------------------------// Globals// Major version of Flash requiredvar requiredMajorVersion = 9;// Minor version of Flash requiredvar requiredMinorVersion = 0;// Minor version of Flash requiredvar requiredRevision = 28;// -----------------------------------------// -->function moveIFrame(x,y,w,h) {    var frameRef=document.getElementById("myFrame");    frameRef.style.left=x;    frameRef.style.top=y;    var iFrameRef=document.getElementById("myIFrame");       iFrameRef.width=w;      iFrameRef.height=h;}function hideIFrame(){    document.getElementById("myFrame").style.visibility="hidden";}function showIFrame(){    document.getElementById("myFrame").style.visibility="visible";}function loadIFrame(url){      document.getElementById("myFrame").innerHTML = "<iframe id='myIFrame' src='" + url + "'frameborder='0'></iframe>";}//要调用的内容，加载前三个就可以了，后面这个函数是用来调用返回值function getEditorText(){      return document.getElementById("myIFrame").contentWindow.GetEditorText1();}</script>

?

? ? ?<3. the 'myFrame' div

? ? ? ? ?在</body>这前写入：

? ? ? ? ?<div id="myFrame" style="position:absolute;background-color:transparent;border:0 ? ? ? ? px;visibility:hidden;"></div>

４、在Flex页面index.mxml输入的函数值,调用index.html中的'getEditorText'函数，并且写入到text1.text中

? ? ?text1.text=ExternalInterface.call('getEditorText',param1,param2,param3,...)

? ? ?getEditorText:函数名称

? ? ?param:参数值

５、在生成页中取得框架中的函数

? ? ?框架内的frame.html，放置在head之间:

? ? function GetEditorText1(){

? ? ?return getHTML(params);

? ? ?index.html生成页的调用，设置在head之间：

? ? ?function getEditorText(){

? ? ? return document.getElementById("myIFrame").contentWindow.GetEditorText1();

? ? ?}

?

后记：实际中在这里只是调用一个层放在对应位置而已，当我们在Flex中做申缩动作时，层也要跟着改变，我是如此处理的：

? ? ?设置move或show事件，当move或show时则调用：iFrame.source = "frame.html"

参考：

http://www.cnflex.cn/html/mxml/20070321/95.html

http://www.cnblogs.com/dannyr/archive/2004/11/24/68026.aspx

http://renaun.com/flex2/posts/flexsearch/index.html（有源码下载）

查看更多 下一篇