用facebox彈出窗口顯示Flash

发布时间：2020-12-15 18:41:20 所属栏目：百科来源：网络整理

导读：用基本的Javascript操作HTML標籤：首先，來看看如何用Javascript操作嵌入Flash的HTML標籤：通常使用Flash Professional輸出flash時，生成的HTML內是通過swfobject來將swf嵌入網頁中的，它的典型格式是： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri

用基本的Javascript操作HTML標籤：

首先，來看看如何用Javascript操作嵌入Flash的HTML標籤：

通常使用Flash Professional輸出flash時，生成的HTML內是通過swfobject來將swf嵌入網頁中的，它的典型格式是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>loadeee</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css" media="screen">
		html,body { height:100%; background-color: #ffffff;}
		body { margin:0; padding:0; overflow:hidden; }
		#flashContent { width:100%; height:100%; }
		</style>
	</head>
	<body>
		<div id="flashContent">
			<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="loadeee" align="middle">
				<param name="movie" value="loadeee.swf" />
				<param name="quality" value="high" />
				<param name="bgcolor" value="#ffffff" />
				<param name="play" value="true" />
				<param name="loop" value="true" />
				<param name="wmode" value="window" />
				<param name="scale" value="showall" />
				<param name="menu" value="true" />
				<param name="devicefont" value="false" />
				<param name="salign" value="" />
				<param name="allowScriptAccess" value="sameDomain" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="loadeee.swf" width="550" height="400">
					<param name="movie" value="loadeee.swf" />
					<param name="quality" value="high" />
					<param name="bgcolor" value="#ffffff" />
					<param name="play" value="true" />
					<param name="loop" value="true" />
					<param name="wmode" value="window" />
					<param name="scale" value="showall" />
					<param name="menu" value="true" />
					<param name="devicefont" value="false" />
					<param name="salign" value="" />
					<param name="allowScriptAccess" value="sameDomain" />
				<!--<![endif]-->
					<a href="http://www.adobe.com/go/getflash">
						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
					</a>
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
		</div>
	</body>
</html>

關於swfobject，這裡暫時不多說，以後的博客再深究。總之，實際上用embed或者object現在都可以在不同瀏覽器內顯示flash。下面是一個從activeden.com下載的flash文件和其中嵌入swf的HTML片段：

<object type="application/x-shockwave-flash" data="http://2.s3.envato.com/files/25717026/preview.swf" width="590" height="300" id="large_item_preview_container" style="visibility: visible; ">
	<param name="base" value="http://2.s3.envato.com/files/25717026/">
	<param name="wmode" value="opaque">
</object>

用Javascript操作object標籤：

object標籤的使用不同於常規的DOM對象，比如在實驗中，我發現不能夠通過.style.width來操作object元素的寬度，而.width就可以了，它是一個字符類型，所以理論上來講，要更改一個object元素的寬度，就可以用：objectRef.width = "500"。其實標籤內的所有屬性在js里都是通過這個格式直接訪問。

在一個web路徑下複製兩個swf文件，還有一個HTML文件，在HTML里，通過Javascript修改object的路徑屬性：data。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
	function changeWidth($e)
	{
		var $ob = document.getElementById("large_item_preview_container");
		$ob.data = "Helicopter.swf";
		console.log($ob);	// for Chrome
	}
</script>
</head>
<body>
<object type="application/x-shockwave-flash" data="Ferris-Wheel.swf" width="590" height="300" id="large_item_preview_container" style="visibility: visible; ">
	<param name="base" value="http://3.s3.envato.com/files/25716554/">
	<param name="wmode" value="opaque">
</object>

<div id="button" style="width: 100px; height: 60px; background-color: yellow; margin-top: 20px;" onclick="changeWidth(event);">
</div>

</body>
</html>

有趣的是當執行語句：

$ob.data = "Helicopter.swf";

之後，Firefox會即刻更新Flash內容，也就是我們所期待的；但是Chrome卻不會，不過在後面緊跟著執行

console.log($ob);

的話，Chrome就會重新渲染Flash部份的內容了。

This is the only official site which is still on line,and the files seem too old:

https://github.com/defunkt/facebox

Refs:

search "show div with facebox" in Google

http://www.electrictoolbox.com/jquery-facebox-greyed-background/

http://forums.asp.net/t/1711549.aspx/1

http://www.dynamicdrive.com/forums/showthread.php?t=52120

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!