DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript創建Silverlight Plugin以及自定義nonSilverlight和lowSilverlight樣式
Javascript創建Silverlight Plugin以及自定義nonSilverlight和lowSilverlight樣式
編輯:關於JavaScript     
默認情況下,生成的頁面代碼可能與下面的代碼類似:
復制代碼 代碼如下:
<!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 href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" 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對象傳遞不同的參數,如xap包的加載地址,onLoad或onError事件句柄,背景色,最小版本號支持等等,完整的參數信息讀者可以參考Silverlight 3中param參數列表匯總。object對象中一般會包含一段<a>標記,是用來顯示當客戶端浏覽器未安裝Silverlight插件時要顯示的內容的,我們可以自定義其中的內容,如:
復制代碼 代碼如下:
<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" href="http://www.microsoft.com/silverlight/resources/install.aspx" target="_blank" />
</map>
</object>

  當客戶端浏覽器未安裝Silverlight插件時,程序會在相應的區域顯示一張帶有熱區的圖片,熱區指向的位置是Microsoft提供的Silverlight安裝地址。理論上,你可以指定任何的自定義代碼來顯示nonSilverlight的效果,但是Silverlight默認沒有提供低版本Silverlight情況下要顯示的效果,也就是lowSilverlight的情況。
Silverlight可以自動實現向前兼容,也就是在低版本下編譯的Silverlight包可以在高版本下運行,相反,在高版本下編譯的Silverlight包不能再低版本下運行,此時Silverlight插件會顯示一張默認的圖片用來告知用戶升級插件,並彈出一個提示框,如下圖:

 

 

  個人覺得這種用戶體驗並非很好,試想,如果當前頁面上有多個Silverlight插件,豈不是要彈出多個提示框嗎?那麼如何來解決這個問題呢?事實上,我們除了直接在頁面上添加object標記來呈現Silverlight外,還可以通過javascript腳本來動態添加Silverlight。Silverlight.js腳本為我們提供了一系列可用的方法,詳細內容大家可以參考下msdn http://msdn.microsoft.com/zh-cn/library/cc838126(v=VS.95).aspx#isinstalled

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

  msdn上給出了非常詳細的例子來告訴我們如何使用這些腳本方法,有一點需要注意,使用Silverlight.js文件時一定要與當前Silverlight版本相一致,否則可能會有腳本錯誤,對應的Silverlight.js文件可以在微軟的站點上下載,你會發現其實有很多個可用的版本,其中還包括支持調試的版本哦。

  createObject方法參數在使用的時候有幾個問題需要注意下:

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

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

  3. param列表通過數組傳遞,參數名稱與在object標記中使用的名稱保持一致即可。

  4. 事件列表如果沒有對應的頁面腳本則傳null值,否則會報腳本錯誤。

  5. 最後一個參數context如果不需要可以省去,不用傳null或空值。

  你應該注意到了,在使用createObject方法時我們可以順便給Silverlight指定nonSilverlight效果,這個是通過param列表中的altHtml參數來指定的,實施上,我們在頁面上直接使用object標記呈現Silverlight時也可以使用alt屬性來指定nonSilverlight效果,這個與在object標記中直接插入html代碼的效果相同。
通過使用createObject方法,我們完全可以自定義lowSilverlight效果了,下面是一個例子:
復制代碼 代碼如下:
<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" href="http://www.microsoft.com/silverlight/resources/install.aspx" target="_blank" />'
+ '</map>');
}
</script>
<iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe>
</div>

  使用Silverlight.isInstalled()方法可以判斷客戶端浏覽器是否已經安裝了指定版本的Silverlight插件,如果已經安裝了,則使用Silverlight.createObject方法創建Silverlight對象,否則輸出自定義的內容。

這裡還有一篇文章個人覺得很有用,給大家分享下吧!

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved