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

本文详细介绍了在使用Flex嵌套Iframe显示JSP页面时，遇到内容消失的问题及其解决方法。通过将index.template.html中的wmode属性更改为transparent，可以有效解决该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址: http://blog.youkuaiyun.com/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"。一般一共会有三个地方。更改完后保存，重新编译，启动工程，成功！

具体的代码如下:（注意红色字体）

<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
// -->

<link rel="stylesheet" type="text/css" href="history/history.css" />

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

<script src="history/history.js" language="javascript"></script>

<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">

<html xmlns=" http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <head>
        <title>${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: ${bgcolor}; }
   #flashContent { display:none; }
        </style>

  
        

        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            
            var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
            
            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);
   
   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
    ${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" />
                
                <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" />
                
                
                <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>
                
                    <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>