flex嵌套html-----flex-iframe

最新推荐文章于 2021-06-23 11:46:30 发布

最新推荐文章于 2021-06-23 11:46:30 发布 · 441 阅读

文章标签：

#Flex #HTML #Flash #Adobe #360

flex 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何在Flex应用中正确嵌入ActiveX组件，包括解决不同浏览器兼容性问题及去除多余滚动条的方法。

在开发中，遇到需要在flex中嵌入activex，先前做法是直接把控件的object对象直接放在flex的html-template中，其实这样是可以实现的，只不过这种做法本质应该不属于我们需要的：flex页面最后在html中显示，并占据整个html页面，将object直接放在html-template中，flex与object共同构成html页面，并不是真正意义上的嵌套。而采用flex-iframe（ panel 嵌入flex-iframe）在flex-iframe中添加html页面，可以将其真正嵌套在flex中。

首先去http://code.google.com/p/flex-iframe/下载flex-iframe包，并导入项目。这个包里有很多例子，很容易看懂。但是在使用中要注意很多问题，下面列举我所遇到的问题

1：嵌入的html页面部分在360 、opera等都可以显示，但是在ie中显示为空白。

解决方法：根据网上前辈的方法，将例子里的html-template中的AC_OETags.js导入，并添加

<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}",
		"wmode", "opaque",
		"allowScriptAccess","sameDomain",
		"type", "application/x-shockwave-flash",
		"pluginspage", "http://www.adobe.com/go/getflashplayer"
	);
} 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}",
			"wmode", "opaque",
			"allowScriptAccess","sameDomain",
			"type", "application/x-shockwave-flash",
			"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>

注意，这样之后你会发现在页面中你会看到2个一模一样的界面，这个主要是你在添加上述代码已经将flex.swf载入，而原来的html-template中也载入了，因此需要将原来的那部分删除。

2 嵌入的页面右侧有滚动条

在嵌入的页面中添加 <body STYLE="overflow-x: hidden; overflow-y: hidden;">，在嵌入控件object时，同时可以调整其高度进行控制

对于如何使用flex-iframe，很简单，看看例子就知道了。嗯目前就这些，基本能解决项目的问题了，以后遇到再研究