先用现成的组件玩一下,一会再去看看组件源码研究一下。

http://code.google.com/p/flex-iframe/

下载了flexiframe.swc,引入工程。

flex代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    xmlns:code="http://code.google.com/p/flex-iframe/">
 <mx:Panel width="500"
     height="400">

  <code:IFrame id="googleIFrame"
      label="Google"
      source="http://www.google.com"
      width="100%"
      height="100%"/>
 </mx:Panel>

</mx:Application>

运行,发现,可以了。

 

不过,有个问题,鼠标点击别处的时候,网页消失了。

找了很多地方,找到了解决方法。设置wmode。

首先了解一下wmode是什么。

window mode(wmode)

wmode即窗口模式总共有三种:

window 模式

默认情况下的显示模式,在这种模式下flash player有自己的窗口句柄,这就意味着flash影片是存在于Windows中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以flash只是貌似显示在浏览器中,但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面,这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。

但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上,但当flash影片播放时会出现比较诡异的现象,比如DHTML层像被flash刮掉一块一样显示异常。

Opaque 模式

这是一种无窗口模式,在这种情况下flash player没有自己的窗口句柄,这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。

Transparent 模式

透明模式,在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象,同样你也可以使用z-index来控制flash影片的深度值,但是与Opaque模式不同的是这样做会降低flash影片的回放效果,而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。

 

这边,我们将wmode设置为transparent。

我直接修改了工程的html模板,红色字体部分为新增加的代码。

if ( hasProductInstall && !hasRequestedVersion ) {
 // DO NOT MODIFY THE FOLLOWING FOUR LINES
 // Location visited after installation is complete if installation is required
 var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
 var MMredirectURL = window.location;
    document.title = document.title.slice(0, 47) + " - Flash Player Installation";
    var MMdoctitle = document.title;

 AC_FL_RunContent(
  "src", "playerProductInstall",
  "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
  "width", "${width}",
  "height", "${height}",
  "align", "middle",
  "id", "${application}",
  "quality", "high",
  "bgcolor", "${bgcolor}",
  "name", "${application}",
  "allowScriptAccess","sameDomain",
  "type", "application/x-shockwave-flash",
  "pluginspage", "http://www.adobe.com/go/getflashplayer",
  "wmode","transparent"
 );
} else if (hasRequestedVersion) {
 // if we've detected an acceptable version
 // embed the Flash Content SWF when all tests are passed
 AC_FL_RunContent(
   "src", "${swf}",
   "width", "${width}",
   "height", "${height}",
   "align", "middle",
   "id", "${application}",
   "quality", "high",
   "bgcolor", "${bgcolor}",
   "name", "${application}",
   "allowScriptAccess","sameDomain",
   "type", "application/x-shockwave-flash",
   "pluginspage", "http://www.adobe.com/go/getflashplayer",
   "wmode","transparent"
 );
  } else {  // flash is too old or we can't detect the plugin
    var alternateContent = 'Alternate HTML content should be placed here. '
   + 'This content requires the Adobe Flash Player. '
    + '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
    document.write(alternateContent);  // insert non-flash content
  }

 

   <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
    width="${width}" height="${height}" name="${application}" align="middle"
    play="true"
    loop="false"
    quality="high"
    allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.adobe.com/go/getflashplayer"
    wmode="transparent">
   </embed>

 

保存,运行。问题解决了。