解决Flex-IFrame嵌入网页，点击iframe外围区域iframe消失

最新推荐文章于 2024-04-20 11:50:28 发布

sonysonyok88

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量2.2k

点赞数

分类专栏： WEB开发 Flex 文章标签： iframe flash adobe javascript attributes browser

WEB开发同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Flex

4 篇文章 0 订阅

订阅专栏

好不容易把iframe引进来了，但是鼠标点击iframe外围区域，iframe网页消失了。百度+google了一下，找到了解决方法。设置wmode。

首先了解一下wmode是什么。

window mode(wmode) 。wmode即窗口模式总共有三种：

l window 模式

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

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

l Opaque 模式

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

l Transparent 模式

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

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

解决办法：

直接修改工程的下的html-template中的index.template.html模板，在该模板文件中，增加红色字体部分的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
        <style type="text/css" media="screen">
    html, body { height:100%; }
    body { margin:0; padding:0; overflow:auto; text-align:center;
          background-color: #ffffff; }
    #flashContent { display:none; }
        </style>

   
        
        <link rel="stylesheet" type="text/css" href="history/history.css" />
        <script type="text/javascript" src="history/history.js"></script>
        

        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            
            var swfVersionStr = "10.0.0";
            
            var xiSwfUrlStr = "playerProductInstall.swf";
            var flashvars = {};
            var params = {};

/ /在嵌入flex的html页面中加入这个，

//object里有个 wmode的属性,你把他设为透明就行了。

params.wmode="transparent";

params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "timeline";
            attributes.name = "timeline";
            attributes.align = "middle";
            swfobject.embedSWF(
                "timeline.swf", "flashContent",
                "100%", "100%",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
    
    swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
    </head>
    <body>
        
        <div id="flashContent">
        <p>
         To view this page ensure that Adobe Flash Player version
     10.0.0 or greater is installed.
    </p>
    <script type="text/javascript">
     var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
     document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
         + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
    </script>
        </div>

       <noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="timeline">
                <param name="movie" value="timeline.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                
                <object type="application/x-shockwave-flash" data="timeline.swf" width="100%" height="100%">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                
                
                <p>
                   Either scripts and active content are not permitted to run or Adobe Flash Player version
                   10.0.0 or greater is not installed.
                </p>
                
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
                    </a>
                
                </object>
                
            </object>
     </noscript>
   </body>
</html>

参考：

http://jnlilong1213.blog.163.com/blog/static/36097392201092511141585/

http://snowelf.iteye.com/blog/945399

sonysonyok88

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决Flex-IFrame嵌入网页，点击iframe外围区域iframe消失

好不容易把iframe引进来了，但是鼠标点击iframe外围区域，iframe网页消失了。百度+google了一下，找到了解决方法。设置wmode。首先了解一下wmode是什么。window mode(wmode) 。wmode即窗口模式总共有三种：l window 模式默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于W
复制链接

扫一扫