[JavaScript]在IE浏览器中隐藏/显示DIV中的Flash不会重新播放的解法
在某个方案中，需求是点击 HTML 页面上的 button 便会以 BlockUI 方式显示一个包含 SWF 动画的 DIV 出来，点击 SWF 上的叉叉可隐藏此 DIV，若使用者再次点击 HTML button，该 DIV 又会显示出来并且从头再播放 SWF 动画。
在 Chrome 以及 Firefox 浏览器上都可以达到上述需求，但到了 IE浏览器上，隐藏 DIV 后再显示，其中的 SWF 似乎并不会被重新载入，因此会停留在上次播放的最后一格，尚不知这是 IE 对于 Flash 的 Bug 或这才是正常的，经过一番讨论跟摸索后试出了解决方法。
当然也可以采用 JavaScript 呼叫 SWF 中的重新播放事件来解决，但此次并不是采用此方法解决。
下面是范例原始 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ieFans.net</title>
<script type="text/javascript" language="javascript">
google.load("jquery", "1");
</script>
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
<style type="text/css">
#swf { display:none; }
</style>
</head><body>
<div id="swf">
<div id="swfcontent"></div>
</div><a href="#">播放动画</a>
</body>
</html>
接著，要将使用 SWFObject 嵌入 SWF 播放事件的 JavaScript 写成一个 Function：
function showSwf() {
var flashvars = { };
var params = {};
params.wmode = "transparent";
params.menu = "true";
params.quality = "high";
var attributes = {id:"FlashID",name:"FlashID"};swfobject.embedSWF("flash.swf", "swfcontent", "698", "608", "10.0.0","expressInstall.swf", flashvars, params, attributes);
}
思路大概是这样的：
开啟：页面载入后，嵌入 SWF 播放事件（CSS 中此事件是隐藏的）到 swf DIV 中，当使用者点击播放动画按钮后，以 BlockUI 方式显示 swf DIV。
关闭：点击 SWF 中的关闭按钮，呼叫关闭 BlockUI 的 Close JavaScript 事件，关闭 swf DIV，此时也移除掉嵌入的 swfobject 播放事件，并再次嵌入（以确保IE浏览器可以重新播放）。
依此思路，写出了第一版的解决方案：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ieFans.net</title>
<script type="text/javascript" language="javascript">
google.load("jquery", "1");
</script>
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
// 嵌入 SWF
function showSwf() {
var flashvars = { };
var params = {};
params.wmode = "transparent";
params.menu = "true";
params.quality = "high";
var attributes = {id:"FlashID",name:"FlashID"};swfobject.embedSWF("flash.swf", "swfcontent", "698", "608", "10.0.0","expressInstall.swf", flashvars, params, attributes);
}// 关闭 Flash
function closeUI(){
$.unblockUI();// 清掉 swf DIV 的内容
$("#swf").html("<div id='swfcontent'></div>");
// 再嵌入一次
showSwf();
}$(document).ready(function() {
showSwf();$('#clickme').click(function() {
$.blockUI({ message: $('#swf') });
});
});
</script>
<style type="text/css">
#swf { display:none; }
</style>
</head><body>
<div id="swf">
<div id="swfcontent"></div>
</div><a id="clickme" href="#">播放动画</a>
</body>
</html>
但是很诡异的事情，依然发生在 IE 上，在这样开开关关几次 DIV 后，有时 SWF 动画就会卡住不动，但用滑鼠在 SWF 上点几下，又或是等个几秒它又自己开始动起来 …
看起来得针对IE浏览器做特别做处理了。
最后跟同事讨论出的最终解决方案 Code 如下：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ieFans.net</title>
<script type="text/javascript" language="javascript">
google.load("jquery", "1");
</script>
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
// 嵌入 SWF
function showSwf() {
var flashvars = { };
var params = {};
params.wmode = "transparent";
params.menu = "true";
params.quality = "high";
var attributes = {id:"FlashID",name:"FlashID"};swfobject.embedSWF("flash.swf", "swfcontent", "698", "608", "10.0.0","expressInstall.swf", flashvars, params, attributes);
}// 关闭 Flash
function closeUI(){
$.unblockUI();// 判断 IE，用 swfobject 方法来移除嵌入事件
if ( $.browser.msie ) {
swfobject.removeSWF("FlashID");$("#swf").hide();
$("#swf").html("<div id='swfcontent'></div>");var att = { data:"flash.swf", width:"698", height:"608" };
var par = { flashvars:"" };
var id = "swfcontent";
var myObject = swfobject.createSWF(att, par, id);
} else {
// 清掉 swf DIV 的内容
$("#swf").html("<div id='swfcontent'></div>");
// 再嵌入一次
showSwf();
}
}$(document).ready(function() {
showSwf();$('#clickme').click(function() {
$.blockUI({ message: $('#swf') });
});
});
</script>
<style type="text/css">
#swf { display:none; }
</style>
</head><body>
<div id="swf">
<div id="swfcontent"></div>
</div><a id="clickme" href="#">播放动画</a>
</body>
</html>
也许用了笨方法来解决，先记下此次解法，有时间再来研究为什么会有这些问题吧！
via：http://patw.idv.tw/blog/
文章引用地址：http://www.iefans.net/javascript-ie-yincang-xianshi-div-flash-chongbo/ 作者：iefans
