在某個案件中，需求是點擊 HTML 頁面上的 button 便會以 BlockUI 方式顯示一個包含 SWF 動畫的 DIV 出來，點擊 SWF 上的叉叉可隱藏此 DIV，若使用者再次點擊 HTML button，該 DIV 又會顯示出來並且從頭再播放 SWF 動畫。
在 Chrome 以及 Firefox 上都可以達到上述需求，但到了 IE 上，隱藏 DIV 後再顯示，其中的 SWF 似乎並不會被重新載入，因此會停留在上次播放的最後一格，尚不知這是 IE 對於 Flash 的 Bug 或這才是正常的，經過一番討論跟摸索後試出了解決方法。
※當然也可以採用 JavaScript 呼叫 SWF 中的重新播放事件來解決，但此次並不是採用此方法解決。
下面是範例原始 HTML（節錄）：
[code language=”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" />
<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>
[/code]
接著，要將使用 SWFObject 嵌入 SWF 播放物件的 JavaScript 寫成一個 Function：
[code language=”javascript”]
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);
}
[/code]
思路大概是這樣的：
開啟：頁面載入後，嵌入 SWF 播放物件（CSS 中此物件是隱藏的）到 swf DIV 中，當使用者點擊播放動畫按鈕後，以 BlockUI 方式顯示 swf DIV。
關閉：點擊 SWF 中的關閉按鈕，呼叫關閉 BlockUI 的 Close JavaScript 事件，關閉 swf DIV，此時也移除掉嵌入的 swfobject 播放物件，並再次嵌入（以確保 IE 可以重新播放）。
依此思路，寫出了第一版的解決方案：
[code language=”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" />
<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>
[/code]
但是很弔詭的事情，依然發生在 IE 上，在這樣開開關關幾次 DIV 後，有時 SWF 動畫就會卡住不動，但用滑鼠在 SWF 上點幾下，又或是等個幾秒它又自己開始動起來 …
看起來得針對 IE 特別做處理了。
最後跟同事討論出的最終解決方案 Code 如下：
[code language=”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" />
<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>
[/code]
也許用了笨方法來解決，先記下此次解法，有時間再來研究為什麼會有這些問題吧 Orz