解决用JavaScript隐藏再显示Flex后不能正常使用问题

时间:2022-09-29 13:05:17
 
其实在试验中,发现IE浏览器是没有问题的,倒是Firefox和Chrome等不可以,发现隐藏swf对象后,再显示时,IE上不会出现重载swf的情况,但是Firefox和Chrome都有重载swf文件的情况,于是想办法让后者浏览器不要重载,于是找到把flex这个object的style中,将其visibility设置成"hidden",且长宽均为0的办法,实验证明果然可以了,解决了不同浏览器不兼容的情况。

代码如下,主要是JavaScript的处理,所以在此不给出Flex的源码。

另外,要注意以前由于Adobe的Flex-Ajax Bridge不考虑Chrome浏览器导致Flex与JavaScript不能交互的情况,要在FABridge.js文件中的FABridge__bridgeInitialized时加入如下判断:
if((!(/Chrome/.test(navigator.appVersion))) && ((/Explorer/.test(navigator.appName) || /Konqueror|Safari|KHTML/.test(navigator.appVersion))))

示例代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test page for the TimeLine3 class</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="lib/FABridge.js"></script>
	<script type="text/javascript" src="TimeLine3.js"></script>
	<script type="text/javascript">
	
	function SetData1() {

		// 取得Flex应用模块中的具体组件
		var column = TimeLine3.getZ_data();
		
		// JavaScript准备数据
		var dp = [];
		dp.push( {z_name: '2011-01-05', z_value02: 37, z_value01: 28} );
		dp.push( {z_name: '2011-01-06', z_value02: 34, z_value01: 37} );
		dp.push( {z_name: '2011-01-07', z_value02: 45, z_value01: 43} );
		dp.push( {z_name: '2011-01-08', z_value02: 41, z_value01: 44} );
		
		// 设置Flex应用模块中组件的属性
		column.setSource(dp);
	}

	function SetData2() {

		// 取得Flex应用模块中的具体组件
		var column = TimeLine3.getZ_data();
		
		// JavaScript准备数据
		var dp = [];
		dp.push( {z_name: '2011-04-02', z_value02: 34, z_value01: 38} );
		dp.push( {z_name: '2011-04-03', z_value02: 24, z_value01: 67} );
		dp.push( {z_name: '2011-04-04', z_value02: 55, z_value01: 13} );
		dp.push( {z_name: '2011-04-05', z_value02: 71, z_value01: 44} );
		
		// 设置Flex应用模块中组件的属性
		column.setSource(dp);
	}
	
	function HideFlex(_flex_id_, _height_, _width_)
	{
		document.getElementById(_flex_id_).style.visibility="hidden";
		document.getElementById(_flex_id_).style.height = _height_;
		document.getElementById(_flex_id_).style.width = _width_;
	}

	function ShowFlex(_flex_id_, _height_, _width_)
	{
		document.getElementById(_flex_id_).style.visibility="visible";
		document.getElementById(_flex_id_).style.width = _height_;
		document.getElementById(_flex_id_).style.height = _width_;
	}

	</script>
</head>

<body>
<input type="button" value="数据1" onclick="SetData1()" />
<input type="button" value="数据2" onclick="SetData2()" />
<input type="button" value="隐藏" onclick="HideFlex('TimeLine3Test', 0, 0)" />
<input type="button" value="显示" onclick="ShowFlex('TimeLine3Test', 960, 320)" />

<div id="div_timeline3" name="div_timeline3" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="TimeLine3Test" width="960" height="320"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
	<param name="movie" value="../TimeLine3.swf" />
	<param name="flashvars" value="bridgeName=b_TimeLine3"/>
	<param name="quality" value="high" />
	<param name="wmode" value="opaque" />
	<param name="allowScriptAccess" value="sameDomain" />
	<embed src="../TimeLine3.swf" quality="high"
		width="960" height="320" name="TimeLine3Test" 
		align="middle"
		play="true"
		loop="false"
		quality="high"
		allowScriptAccess="sameDomain"
		type="application/x-shockwave-flash"
		pluginspage="http://www.adobe.com/go/getflashplayer" 
		flashvars="bridgeName=b_TimeLine3">
	</embed>
</object>
</div>

</body>
</html>


 


因为不能上传Flex文件演示,只好截几个图来看一下效果:

用于chrome浏览器:

解决用JavaScript隐藏再显示Flex后不能正常使用问题

用于firefox浏览器:

解决用JavaScript隐藏再显示Flex后不能正常使用问题

用于IE浏览器:

解决用JavaScript隐藏再显示Flex后不能正常使用问题