先用現(xiàn)成的組件玩一下，一會(huì)再去看看組件源碼研究一下。
http://code.google.com/p/flex-iframe/
下載了flexiframe.swc，引入工程。
flex代碼
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" layout="absolute"
xmlns:code=" <mx:Panel width="500"
height="400">
<code:IFrame id="googleIFrame"
label="Google"
source=" width="100%"
height="100%"/>
</mx:Panel>
</mx:Application>
運(yùn)行，發(fā)現(xiàn)，可以了。
不過，有個(gè)問題，鼠標(biāo)點(diǎn)擊別處的時(shí)候，網(wǎng)頁消失了。
找了很多地方，找到了解決方法。設(shè)置wmode。
首先了解一下wmode是什么。
window mode(wmode)
wmode即窗口模式總共有三種：
window 模式
默認(rèn)情況下的顯示模式，在這種模式下flash player有自己的窗口句柄，這就意味著flash影片是存在于Windows中的一個(gè)顯示實(shí)例，并且是在瀏覽器核心顯示窗口之上的，所以flash只 是貌似顯示在瀏覽器中，但這也是flash最快最有效率的渲染模式。由于他是獨(dú)立于瀏覽器的HTML渲染表面，這就導(dǎo)致默認(rèn)顯示方式下flash總是會(huì)遮 住位置與他重合的所有DHTML層。
但是大多數(shù)蘋果電腦瀏覽器會(huì)允許DHTML層顯示在flash之上，但當(dāng)flash影片播放時(shí)會(huì)出現(xiàn)比較詭異的現(xiàn)象，比如DHTML層像被flash刮掉一塊一樣顯示異常。
Opaque 模式
這 是一種無窗口模式，在這種情況下flash player沒有自己的窗口句柄，這就需要瀏覽器需要告訴flash player在瀏覽器的渲染表面繪制的時(shí)間和位置。這時(shí)flash影片就不會(huì)在高于瀏覽器HTML渲染表面而是與其他元素一樣在同一個(gè)頁面上,因此你就可 以使用z-index值來控制DHTML元素是遮蓋flash或者被遮蓋。
Transparent 模式
透明模式， 在這種模式下flash player會(huì)將stage的背景色alpha值將為0并且只會(huì)繪制stage上真實(shí)可見的對象，同樣你也可以使用z-index來控制flash影片的 深度值，但是與Opaque模式不同的是這樣做會(huì)降低flash影片的回放效果，而且在9.0.115之前的flash player版本設(shè)置wmode=”opaque”或”transparent”會(huì)導(dǎo)致全屏模式失效。
這邊，我們將wmode設(shè)置為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", " "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", " "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="center"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage=" wmode="transparent">
</embed>
保存，運(yùn)行。問題解決了。