快捷導(dǎo)航

Javascript創(chuàng)建Silverlight Plugin以及自定義nonSilverlight和lowSilverlight樣式

更新時(shí)間：2010年06月28日 17:48:04 作者：

我們?cè)谑褂肰isual Studio IDE創(chuàng)建Silverlight工程時(shí)，默認(rèn)情況下都會(huì)自動(dòng)生成一個(gè)用于調(diào)試和預(yù)覽Silverlight的Web工程，該工程包含了html和aspx頁(yè)面，以及Silverlight.js腳本文件。

默認(rèn)情況下，生成的頁(yè)面代碼可能與下面的代碼類(lèi)似：

復(fù)制代碼代碼如下:

 
<!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> 
<title>IRERTranscript</title> 
<style type="text/css"> 
html, body { 
height: 100%; 
overflow: auto; 
} 
body { 
padding: 0; 
margin: 0; 
} 
#silverlightControlHost { 
height: 100%; 
text-align:center; 
} 
</style> 
<script type="text/javascript" src="Silverlight.js"></script> 
<script type="text/javascript"> 
function onSilverlightError(sender, args) { 
var appSource = ""; 
if (sender != null && sender != 0) { 
appSource = sender.getHost().Source; 
} 
var errorType = args.ErrorType; 
var iErrorCode = args.ErrorCode; 
if (errorType == "ImageError" || errorType == "MediaError") { 
return; 
} 
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ; 
errMsg += "Code: "+ iErrorCode + " \n"; 
errMsg += "Category: " + errorType + " \n"; 
errMsg += "Message: " + args.ErrorMessage + " \n"; 
if (errorType == "ParserError") { 
errMsg += "File: " + args.xamlFile + " \n"; 
errMsg += "Line: " + args.lineNumber + " \n"; 
errMsg += "Position: " + args.charPosition + " \n"; 
} 
else if (errorType == "RuntimeError") { 
if (args.lineNumber != 0) { 
errMsg += "Line: " + args.lineNumber + " \n"; 
errMsg += "Position: " + args.charPosition + " \n"; 
} 
errMsg += "MethodName: " + args.methodName + " \n"; 
} 
throw new Error(errMsg); 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server" style="height:100%"> 
<div id="silverlightControlHost"> 
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> 
<param name="source" value="ClientBin/example.xap"/> 
<param name="onError" value="onSilverlightError" /> 
<param name="background" value="white" /> 
<param name="minRuntimeVersion" value="4.0.50401.0" /> 
<param name="autoUpgrade" value="true" /> 
<a  style="text-decoration:none"> 
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/> 
</a> 
</object><iframe id="slExample" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div> 
</form> 
</body> 
</html> 

　　我們可以給object對(duì)象傳遞不同的參數(shù)，如xap包的加載地址，onLoad或onError事件句柄，背景色，最小版本號(hào)支持等等，完整的參數(shù)信息讀者可以參考Silverlight 3中param參數(shù)列表匯總。object對(duì)象中一般會(huì)包含一段<a>標(biāo)記，是用來(lái)顯示當(dāng)客戶端瀏覽器未安裝Silverlight插件時(shí)要顯示的內(nèi)容的，我們可以自定義其中的內(nèi)容，如：

復(fù)制代碼代碼如下:

 
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> 
<param name="source" value="ClientBin/example.xap"/> 
<param name="onError" value="onSilverlightError" /> 
<param name="background" value="white" /> 
<param name="minRuntimeVersion" value="4.0.50401.0" /> 
<param name="autoUpgrade" value="true" /> 
<img src="/images/NonSilverlight.jpg" style="border-style: none" usemap="#NonSilverlight" /> 
<map name="NonSilverlight" id="NonSilverlight"> 
<area shape="RECT" coords="154,87,362,183" title="Get Microsoft Silverlight"  target="_blank" /> 
</map> 
</object> 

　　當(dāng)客戶端瀏覽器未安裝Silverlight插件時(shí)，程序會(huì)在相應(yīng)的區(qū)域顯示一張帶有熱區(qū)的圖片，熱區(qū)指向的位置是Microsoft提供的Silverlight安裝地址。理論上，你可以指定任何的自定義代碼來(lái)顯示nonSilverlight的效果，但是Silverlight默認(rèn)沒(méi)有提供低版本Silverlight情況下要顯示的效果，也就是lowSilverlight的情況。
Silverlight可以自動(dòng)實(shí)現(xiàn)向前兼容，也就是在低版本下編譯的Silverlight包可以在高版本下運(yùn)行，相反，在高版本下編譯的Silverlight包不能再低版本下運(yùn)行，此時(shí)Silverlight插件會(huì)顯示一張默認(rèn)的圖片用來(lái)告知用戶升級(jí)插件，并彈出一個(gè)提示框，如下圖：

　　個(gè)人覺(jué)得這種用戶體驗(yàn)并非很好，試想，如果當(dāng)前頁(yè)面上有多個(gè)Silverlight插件，豈不是要彈出多個(gè)提示框嗎？那么如何來(lái)解決這個(gè)問(wèn)題呢？事實(shí)上，我們除了直接在頁(yè)面上添加object標(biāo)記來(lái)呈現(xiàn)Silverlight外，還可以通過(guò)javascript腳本來(lái)動(dòng)態(tài)添加Silverlight。Silverlight.js腳本為我們提供了一系列可用的方法，詳細(xì)內(nèi)容大家可以參考下msdn http://msdn.microsoft.com/zh-cn/library/cc838126(v=VS.95).aspx#isinstalled

　　以及如何通過(guò)腳本在頁(yè)面上添加Silverlight，http://msdn.microsoft.com/zh-cn/library/cc265155(v=VS.95).aspx

　　msdn上給出了非常詳細(xì)的例子來(lái)告訴我們?nèi)绾问褂眠@些腳本方法，有一點(diǎn)需要注意，使用Silverlight.js文件時(shí)一定要與當(dāng)前Silverlight版本相一致，否則可能會(huì)有腳本錯(cuò)誤，對(duì)應(yīng)的Silverlight.js文件可以在微軟的站點(diǎn)上下載，你會(huì)發(fā)現(xiàn)其實(shí)有很多個(gè)可用的版本，其中還包括支持調(diào)試的版本哦。

　　createObject方法參數(shù)在使用的時(shí)候有幾個(gè)問(wèn)題需要注意下：

　　1. 參數(shù)按順序指定，如果有不需要傳遞的參數(shù)可用null代替。

　　2. parent element參數(shù)必須指定，也就是object標(biāo)記的父元素，可直接將元素的id當(dāng)做對(duì)象傳入，但是在Firefox中不支持，此時(shí)可以使用document.getElementById('elementId')語(yǔ)句代替該參數(shù)即可。

　　3. param列表通過(guò)數(shù)組傳遞，參數(shù)名稱(chēng)與在object標(biāo)記中使用的名稱(chēng)保持一致即可。

　　4. 事件列表如果沒(méi)有對(duì)應(yīng)的頁(yè)面腳本則傳null值，否則會(huì)報(bào)腳本錯(cuò)誤。

　　5. 最后一個(gè)參數(shù)context如果不需要可以省去，不用傳null或空值。

　　你應(yīng)該注意到了，在使用createObject方法時(shí)我們可以順便給Silverlight指定nonSilverlight效果，這個(gè)是通過(guò)param列表中的altHtml參數(shù)來(lái)指定的，實(shí)施上，我們?cè)陧?yè)面上直接使用object標(biāo)記呈現(xiàn)Silverlight時(shí)也可以使用alt屬性來(lái)指定nonSilverlight效果，這個(gè)與在object標(biāo)記中直接插入html代碼的效果相同。
通過(guò)使用createObject方法，我們完全可以自定義lowSilverlight效果了，下面是一個(gè)例子：

復(fù)制代碼代碼如下:

 
<div id="divSilverlightContent"> 
<script type="text/javascript"> 
if (Silverlight.isInstalled("4.0.50303.0")){ 
Silverlight.createObject("ClientBin/SilverlightApplication1.xap", 
document.getElementById('divSilverlightContent'), 
null, 
{ width: "532px", height: "380px", background: "white", version:"4.0.50303.0", windowless:"true" }, 
null, 
"param1=value1,param2=value2"); 
} 
else { 
document.write('<img src="images/NonSilverlight.jpg" style="border-style: none" usemap="#SLMap3D_NonSilverlight" />' 
+ '<map name="NonSilverlight" id="NonSilverlight">' 
+ '<area shape="RECT" coords="154,87,362,183" title="Get Microsoft Silverlight"  target="_blank" />' 
+ '</map>'); 
} 
</script> 
<iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe> 
</div> 

　　使用Silverlight.isInstalled()方法可以判斷客戶端瀏覽器是否已經(jīng)安裝了指定版本的Silverlight插件，如果已經(jīng)安裝了，則使用Silverlight.createObject方法創(chuàng)建Silverlight對(duì)象，否則輸出自定義的內(nèi)容。

這里還有一篇文章個(gè)人覺(jué)得很有用，給大家分享下吧！

http://www.itstrike.cn/Question/Use-JavaScript-to-create-Silverlight-Object-createObject

您可能感興趣的文章: