Flex嵌套Iframe,点击除Iframe的其他地方后,Iframe内容消失的问题。

来源:互联网 发布:三峡好人知乎 编辑:程序博客网 时间:2024/05/17 05:14

原文地址: http://blog.csdn.net/kenchow126/article/details/7361150

今天遇到一个很让人闹心的问题,就是我的Flex中为了嵌套一个jsp,所以在flex中嵌套一个包含JSP页面的Iframe。问题出现了,当我点击除了Iframe的其他地方的时候,Iframe中的内容全部消失了。刚开始我还困惑到底是怎么回事,后来才发现这个问题是完全可以解决的。解决的方法如下:

          在index.template.html中更改一个属性,index.template.html在你的flex工程下,目录为 :工程名\html-template\index.template.html。打开后,查看window的属性"wmode",看到后,将其值更改为"transparent"。一般一共会有三个地方。更改完后保存,重新编译,启动工程,成功!

         具体的代码如下:(注意红色字体)

<!-- saved from url=(0014)about:internet -->
<html lang="en">

<!--
Smart developers always View Source.

This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR.

Learn more about Flex at http://flex.org
// -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--  BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<!--  END Browser History required section -->

<title>${title}</title>
<script src="AC_OETags.js" language="javascript"></script>

<!--  BEGIN Browser History required section -->
<script src="history/history.js" language="javascript"></script>
<!--  END Browser History required section -->

<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = ${version_major};
// Minor version of Flash required
var requiredMinorVersion = ${version_minor};
// Minor version of Flash required
var requiredRevision = ${version_revision};
// -----------------------------------------------------------------------------
// -->
</script>
<script src="../scripts/hello.js" language="javascript"></script>
</head>

<body scroll="no">
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

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",
  "wmode", "transparent", 
  "pluginspage", "http://www.adobe.com/go/getflashplayer"
 );
} else if (hasRequestedVersion) {
 // if we've detected an acceptable version   transparent
 // 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",
   "wmode", "transparent", 
   "pluginspage", "http://www.adobe.com/go/getflashplayer"
 );
  } 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
  }
// -->
</script>
<noscript>
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   id="${application}" width="${width}" height="${height}"
   codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
   <param name="movie" value="${swf}.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="${bgcolor}" />
   <param name="allowScriptAccess" value="sameDomain" />
   <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>
 </object>
</noscript>
</body>
</html>

 

二、flex里嵌套iframe,点击iframe,再点击外层的组件,iframe里的html内容变没了,不知道为什么?

这个问题其实很简单... 里面加wmode="transparent"就OK了. 跟你代码没有关系. 其实就swf与网页容器的上下层关系问题.当你点击的时候,swf跑到容器后面去了.所以看不见.其实他在网页上的.
1、<object>里面加<param name="wmode" value="transparent" /><embed>加wmode="transparent"就OK了.
2、flex4修改方式如下:也是修改目录名:工程名\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">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <!--
    Smart developers always View Source.
   
    This application was built using Adobe Flex, an open source framework
    for building rich Internet applications that get delivered via the
    Flash Player or to desktops via Adobe AIR.
   
    Learn more about Flex at http://flex.org
    // -->
    <head>
        <title>${title}</title>        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and
       the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as
    the percentage of the height of its parent container, which has to be set explicitly.  Initially,
    don't display flashContent div so it won't show if JavaScript disabled.
  -->
        <style type="text/css" media="screen">
   html, body { height:100%; }
   body { margin:0; padding:0; overflow:auto; text-align:center;
          background-color: ${bgcolor}; }  
   #flashContent { display:none; }
        </style>
  
  <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
        <!-- BEGIN Browser History required section ${useBrowserHistory}>
        <link rel="stylesheet" type="text/css" href="history/history.css" />
        <script type="text/javascript" src="history/history.js"></script>
        <!${useBrowserHistory} END Browser History required section --> 
     
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->
            var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "${expressInstallSwf}";
            var flashvars = {};
            var params = {};
            params.quality = "high";
            params.bgcolor = "${bgcolor}";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            params.wmode = "transparent";   //添加部分
            var attributes = {};
            attributes.id = "${application}";
            attributes.name = "${application}";
            attributes.align = "middle";
            swfobject.embedSWF(
                "${swf}.swf", "flashContent",
                "${width}", "${height}",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
   <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
   swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
    </head>
    <body>
        <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough
    JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
    when JavaScript is disabled.
  -->
        <div id="flashContent">
         <p>
          To view this page ensure that Adobe Flash Player version
    ${version_major}.${version_minor}.${version_revision} 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="${width}" height="${height}" id="${application}">
                <param name="movie" value="${swf}.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="${bgcolor}" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <param name="wmode" value="transparent" /><!--添加部分-->
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="${swf}.swf" width="${width}" height="${height}">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="${bgcolor}" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                 <p>
                  Either scripts and active content are not permitted to run or Adobe Flash Player version
                  ${version_major}.${version_minor}.${version_revision} or greater is not installed.
                 </p>
                <!--<![endif]-->
                    <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>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
     </noscript>  
   </body>
</html>

原创粉丝点击