flash嵌入html 在html網(wǎng)頁代碼中嵌入Flash文件的解決方案(上)

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)頁制作

flash嵌入html 在html網(wǎng)頁代碼中嵌入Flash文件的解決方案(上)

來源：易賢網(wǎng) 閱讀：1936 次日期：2016-06-21 14:14:32

溫馨提示：易賢網(wǎng)小編為您整理了“flash嵌入html 在html網(wǎng)頁代碼中嵌入Flash文件的解決方案(上)”,方便廣大網(wǎng)友查閱！

在HTML代碼中嵌入Flash文件一直都是廣大web愛好者所所喜歡挑戰(zhàn)的事，也算不上什么挑戰(zhàn)(對于新手朋友來說吧)好了，閑話不多說，切入正題

我先來描述一下任務(wù)要求吧：公司網(wǎng)站首頁上有一張由五個(gè)球組成的JPG圖片，其作用是用來導(dǎo)航，點(diǎn)擊每個(gè)球上的文字后會(huì)打開相應(yīng)信息的二級頁面，與該圖片相應(yīng)的有一個(gè)幾乎一模一樣的Flash版本。而上司布置給我的任務(wù)之一就是：當(dāng)客戶端瀏覽器安裝了Flash文件播放器時(shí)，顯示Flash版導(dǎo)航，反之顯示JPG圖片導(dǎo)航。拿到任務(wù)后，考慮片刻，既是前端開發(fā)，當(dāng)然要考慮瀏覽器兼容問題，跨越瀏覽器之間的鴻溝最好的辦法就是使用一種或多種成熟的JavaScript框架，很幸運(yùn)的是恰好有一個(gè)非常成熟精巧的JS框架存在，名曰：SWFObject.js。

第一次接觸SWFObject.js是其V1.5，而這次我解決問題使用的是V2.1，兩者之間的使用上還是有些差別的。整體上給我的感覺是V2.1較之V1.5來說，是一次大躍進(jìn)，V2.1無論從框架的源碼還是使用過程來說，都更加符合面向?qū)ο蟮腏avaScript編程風(fēng)格。

我將以一個(gè)探索JavaScript不久的研習(xí)者的視角，帶著您一起來體驗(yàn)這趟“折騰”之旅，無論您是和我一樣的新手，還是已經(jīng)能夠熟練編寫各種JS代碼的老手，望請手下留情，希望大家以文明的心態(tài)指出我思考中的短視和文字中的錯(cuò)誤。

下面的代碼是我從SWFObject V1.5的一篇說明文檔（如想進(jìn)一步了解V1.5請點(diǎn)擊該鏈接即可）中改編而來的使用示例：

代碼如下:

<html>

<head>

var so = new SWFObject("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF");

so.write("flashcontent");

</script>

</head>

<body>

<a >

</a>

</div>

</form>

</body>

</html>

如果您想簡要了解一下SWFObject()中的各個(gè)參數(shù)的含義，請參考說明文檔，再此不在復(fù)述。

我強(qiáng)烈建議您，把“V1.5使用示例”中的代碼拷貝到記事本中，并點(diǎn)擊SWFObject V1.5下載所需的V1.5框架的源文件，解壓縮后找到swfobject_source.js（未壓縮版，壓縮版文件名是swfobject.js）文件，將記事本文件更名為demo.html后與swfobject_source.js文件放置于相同文件夾下即可，然后請您分別在IE6/IE7、fox、opera、safari、 navigator、chrome 等任意一款瀏覽器下運(yùn)行看看結(jié)果如何。

如果您按照我的建議操作了，應(yīng)當(dāng)發(fā)現(xiàn)顯示在頁面上的是這張圖：

而非一個(gè)Flash文件，這是為什么呢？如果您的PC上恰好安裝了IE系列的話，請按照以下步驟操作：點(diǎn)擊IE瀏覽器圖標(biāo)，找到工具欄上的“工具”菜單，選中的“Internet選項(xiàng)”，在打開的窗口中點(diǎn)擊“高級”，找到“禁用腳本調(diào)試（Internet Explorer）”選項(xiàng)，將其前面方框中的勾選去掉，點(diǎn)擊“確定”。請?jiān)谕瓿缮鲜霾僮髦?，再次瀏覽demo.html頁面，是否會(huì)發(fā)現(xiàn)彈出一個(gè)錯(cuò)誤提示框，其提示錯(cuò)誤信息如下：“出現(xiàn)了運(yùn)行時(shí)錯(cuò)誤，是否需要進(jìn)行調(diào)試。行：117 錯(cuò)誤：'null'為空或不是對象?！?

如果您恰好正在使用VS 2003/2005/2008系列的IDE做開發(fā)，那么我想無需教您如何調(diào)試JavaScript代碼了，您可以var so = ……的上方打一個(gè)debugger，然后調(diào)試跟蹤進(jìn)去，不停按F11后直到通過so.write()方法追蹤到swfobject_source.js文件的內(nèi)部，您會(huì)發(fā)現(xiàn)傳遞給so.write(elementId)的實(shí)參"flashcontent"在document.getElementById("flashcontent")時(shí)值一直為null，這又是為什么？發(fā)現(xiàn)問題所在了嗎？

呵呵，如果您還是一名對JavaScript了解不多的新手，那么會(huì)和當(dāng)時(shí)的我一樣頓時(shí)陷入迷惘之中，在經(jīng)過多次的調(diào)試和修改代碼后，我堅(jiān)信自己編寫的JS代碼本身是不存在錯(cuò)誤的，難道是外部加載的swfobject_source.js文件有問題，如果有問題，那問題究竟出在哪里了？當(dāng)時(shí)，我是這樣尋求解決錯(cuò)誤的方法，我將上述代碼修改為以下示例：

代碼如下:

<html>

<head>

// 執(zhí)行一個(gè)匿名函數(shù)，和執(zhí)行一個(gè)普通的函數(shù)沒有差別

(function() {

var flash = document.getElementById("flashcontent");

var msg = null;

window.onload = function() {

if ( flash ) {

msg = 'The element does exist.';

flash.innerHTML = msg;

} else {

msg = 'The element does not exist';

window.alert( msg );

}

};

})();

</script>

</head>

<body>

<a >

</a>

</div>

</form>

</body>

</html>

如果您執(zhí)行了上述代碼就會(huì)發(fā)現(xiàn)，依舊發(fā)現(xiàn)顯示在頁面上的還是這張圖：

并且彈出一個(gè)含有“The element does not exist"的警告框，看來問題并非出自外部加載的swfobject_source.js文件上。

如果您看到這里，定會(huì)體驗(yàn)我當(dāng)時(shí)的懊惱，在稍微休息后，清醒下腦子回頭再看，才發(fā)現(xiàn)問題的本質(zhì)出在“HTML DOM的加載”上。在一個(gè)頁面中，處于頁面頭部(即<head></head>之間)中的JS腳本以及從外部文件加載的JS文件會(huì)在HTML DOM 真正構(gòu)造之前就執(zhí)行了。因此這兩個(gè)地方執(zhí)行的腳本并不能訪問還不存在的DOM。您應(yīng)該知道真正的原因了，那就是示例1.1 中的JS代碼執(zhí)行過程中，訪問了還未來得及構(gòu)造的<div id="flashcontent">……</div>。

好了，看到這里，還有最后一個(gè)步驟需要您親自動(dòng)手操作一下，就是將上述代碼簡單的修改一下，采取一種并不優(yōu)雅的方法解決

關(guān)于“HTML DOM的加載”的問題，到底是哪種方法呢，我想大家或許應(yīng)該猜想到了，對，正是如下這種方式：

代碼如下:

<html>

<head>

</head>

<body>

<a >

</a>

</div>

</form>

var so = new SWFObject("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF");