首頁 > 開發者 > JavaScript

Javascript建立Silverlight Plugin以及自訂nonSilverlight和lowSilverlight樣式

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

預設情況下，產生的頁面代碼可能與下面的代碼類似： 複製代碼 代碼如下:<!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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
microsoft silverlight plugin silverlight plugin chrome chrome silverlight plugin silverlight plugin update install silverlight plugin install silverlight plugin for chrome silverlight extension
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More