通常,flash是被嵌入到网页中。而网页如何嵌入到flash中呢。flash没有对应处理显示web页面的api(air有),所以只是表象:网页和swf是一体的,两者相互融洽,看得似好。利用iframe,通过层级关系,将网页和flash的宽高,坐标对应好就可以了。
这个时候,还会出现一个问题。如果flash的坐标改变了,iframe的相对坐标也应改变。为了处理好这种因变化而变化的关系,特意抽象了一个类,用来实现这种现象和变化。注释,原理都写在类中了。看了就会明白吧。
先看个demo:
http://www.vinixiu.com/demo/as3/swfiframe.html
再贴类:
/** * 参考:https://github.com/flex-users/flex-iframe * 参考:http://bbs.9ria.com/thread-170863-1-1.html * ============================================================================================= * 功能实现:Flash中嵌入网页(其实,就是在flash上铺一个网页。就是html,js,css范畴) * ============================================================================================= * 实现原理: * 1, 利用css的相对定位,绝对定位。将iframe容器和flash容器定义为同层次的div。就是其父容器是同一个, * 父容器的定位方式相对定位。子容器用绝对定位。为避免错位,flash容器相对父容器的left,right值都为0。 * 这样,只需要处理flash内部容器离flash舞台(0, 0)的相对位置就可以。 * 2, 设置iframe的层级。css的相对定位,结合绝对定位。可以打破html的流式布局。将div可以叠加在一起。 * 这时候,就需要设置显示层级关系。iframe容器的层级至少要高于flash容器的层级。 * 3, 细节设置。比如设置iframe以及iframe的容器border为0,overflow位hidden。iframe的scrolling等。 * 4, 嵌入flash最好使用swfobject.js实现。 * ============================================================================================= * 主要接口: * 1, render: 调用moveIFrame接口。控制iframe相对坐标以及宽高。 * 2, width, height, x, y: 设置iframe的宽高,以及坐标。仅仅set这些不生效,需要调用render接口生效。 * 3, load:设置iframe的src地址以及加载完成iframe的回调函数(给js用的) * 4, visible:设置iframe的显示与隐藏。 * ============================================================================================= * 注意: * 1, iframe加载完成事件的定义。在IFrameExternalCalls的url中的第二个参数。 * 2, 当iframe的宽,高,x,y等变化后,除了调用其set为,还需要手动调动render才行。 * 3, iframe和flash结合。其实就是将iframe和flash中的显示对象一起排版使用。如果相对应的显示对象的父 * 容器或父父容器的坐标变化了(这个时候会引起对应显示对象的世界坐标),应动态调整iframe的宽高以及 * x,y坐标。所以相对应的显示对象不宜嵌套太多的层级。
* 4, 注意容器id。iframe容器的id一定要是iframeContainer。因为在类中强制固定iframe的id为iframeContainer。 * ============================================================================================= eg: css样式: .player{ display: inline-block; position: relative; width: 1008px; height: 570px; margin-top: 40px; margin-left: calc((100% - 1008px) * 0.5); } #iframeContainer{ position:absolute; border:0px; z-index:2; overflow: hidden; } html代码: <div class="player"> <div id="swfContainer"></div> <div id="iframeContainer"></div> </div> js代码: <script src="//cdn.bootcss.com/swfobject/2.2/swfobject.min.js"></script> <script type="text/javascript"> var params = {quality:"height", allowScriptAccess:"always", wmode:"opaque", bgcolor:"#333333", allowFullScreen:true, allowFullScreenInteractive:true}; var flashvars = {setUrl:"http://dreamana.com/lab/badapple/BadApple.mp4"}; var attributes = {name:"index-video", id:"index-video"}; swfobject.embedSWF("../static/swfs/WEBIFrame.swf", "swfContainer", "100%", "100%", "12.0.0", null, flashvars, params, attributes); </script> as代码: var iframe:IFrame = new IFrame(); addChild(iframe) iframe.x = 100; iframe.y = 30; iframe.width = 520; iframe.height = 380; iframe.render(); iframe.load("http://baidu.com"); * ============================================================================================= */ package com.vini123.library.iframe { import flash.display.Sprite; import flash.events.Event; import flash.geom.Point; /** * * @author vini123 * */ public class IFrame extends Sprite { private var _source:String; private var _width:Number; private var _height:Number; public function IFrame() { addEventListener(Event.RENDER, moveIFrame); } /** * * @param url iframe的src * @param loadCompleteFun iframe加载完毕的回调地址,给js用的 * */ public function load(url:String, loadCompleteFun:String = ""):void { if(!url) return; _source = url; IFrameExternalCalls.call(IFrameExternalCalls.url, url, loadCompleteFun); moveIFrame(null); } /** * * @return * iframe的宽度 */ override public function get width():Number { return _width; } override public function set width(value:Number):void { if(value == _width) return; _width = value; } /** * * @return * iframe的高度 */ override public function get height():Number { return _height; } override public function set height(value:Number):void { if(value == _height) return; _height = value; } /** * * @param value * 位置 */ override public function set x(value:Number):void { if(super.x == value) return; super.x = value; } override public function set y(value:Number):void { if(super.y == value) return; super.y = value; } /** * * @param e * 移动iframe */ private function moveIFrame(e:Event):void { if(!_source) return; var globalPoint:Point = localToGlobal(new Point(0, 0)); IFrameExternalCalls.call(IFrameExternalCalls.move, globalPoint.x, globalPoint.y, _width, _height); } override public function set visible(value:Boolean):void { super.visible = value; IFrameExternalCalls.call(IFrameExternalCalls.visible, value.toString()); } public function render():void { if(stage) stage.invalidate(); } } } import flash.external.ExternalInterface; class IFrameExternalCalls { public static function call(...args):void { if(ExternalInterface.available) { ExternalInterface.call.apply(null, args); } } public static var overflow:XML = new XML( <script> <![CDATA[ function (p_para) { var objNode = document.getElementById("innerIFrameContainer"); objNode.style.overflow = p_para; } ]]> </script> ); public static var visible:XML = new XML( <script> <![CDATA[ function(p_visible) { var objNode = document.getElementById("iframeContainer"); if (p_visible == "true") { objNode.style.visibility = "visible"; }else { objNode.style.visibility = "hidden"; } } ]]> </script> ); /** * p_url, iframe的src * lc_fun, iframe加载完毕调用的js函数 * 注意。设置好url之后,需要设置move。这个用来控制iframe的相对坐标以及宽高。 */ public static var url:XML = new XML( <script> <![CDATA[ function (p_url, lc_fun="") { var iframeNode = document.getElementById("iframeContainer"); iframeNode.innerHTML = "<iframe id='innerIFrameContainer' src='" + p_url + "' onload='" + lc_fun + "' frameborder='0' scrolling='no' allowTransparency='true' ></iframe>"; } ]]> </script> ); public static var move:XML = new XML( <script> <![CDATA[ function (p_x, p_y, p_w, p_h) { var iframeNode = document.getElementById("iframeContainer"); iframeNode.style.left = p_x + "px"; iframeNode.style.top = p_y + "px"; var innerIFrame = document.getElementById("innerIFrameContainer"); innerIFrame.width = p_w + "px"; innerIFrame.height = p_h + "px"; } ]]> </script> ); }