Silverlight是跨瀏覽器，跨客戶平臺的瀏覽器插件，可以應用在Windows，Linux，Mac等平臺。作為瀏覽器插件，Silverlight可以像Flash一樣，很方便的嵌套在HTML頁面中，下面我來介紹一下，如何添加Silverlight應用到HTML頁面。
1. 首先，我們來看看VS2008自動生成的代碼，新建一個Silverlight應用項目，Html_SilverlightChina，創建的時候選中將Silverlight項目分布到Web項目中。
2. 創建項目后，在Web項目中，會自動生成測試文檔頁面，分別是Html_SilverlightChinaTestPage.aspx和Html_SilverlightChinaTestPage.html，由于本文是講述如何添加Silverlight應用到HTML，所以，我們將集中講述Html_SilverlightChinaTestPage.html頁面代碼。
HTML代碼
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="//www.w3.org/1999/xhtml" >
3
4 <head>
5 <title>Html_SilverlightChina</title>
6 <style type="text/css">
7 html, body {
8 ; height: 100%;
9 overflow: auto;
10 }
11 body {
12 padding: 0;
13 margin: 0;
14 }
15 #silverlightControlHost {
16 ; height: 100%;
17 text-align:center;
18 }
19 </style>
20 <script type="text/javascript" src="Silverlight.js"></script>
21 <script type="text/javascript">
22 function onSilverlightError(sender, args) {
23 var appSource = "";
24 if (sender != null && sender != 0) {
25 appSource = sender.getHost().Source;
26 }
27
28 var errorType = args.ErrorType;
29 var iErrorCode = args.ErrorCode;
30
31 if (errorType == "ImageError" || errorType == "MediaError") {
32 return;
33 }
34
35 var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ;
36
37 errMsg += "Code: "+ iErrorCode + " \n";
38 errMsg += "Category: " + errorType + " \n";
39 errMsg += "Message: " + args.ErrorMessage + " \n";
40
41 if (errorType == "ParserError") {
42 errMsg += "File: " + args.xamlFile + " \n";
43 errMsg += "Line: " + args.lineNumber + " \n";
44 errMsg += "Position: " + args.charPosition + " \n";
45 }
46 else if (errorType == "RuntimeError") {
47 if (args.lineNumber != 0) {
48 errMsg += "Line: " + args.lineNumber + " \n";
49 errMsg += "Position: " + args.charPosition + " \n";
50 }
51 errMsg += "MethodName: " + args.methodName + " \n";
52 }
53
54 throw new Error(errMsg);
55 }
56 </script>
57 </head>
58 <body>
59 <form id="form1" runat="server" style="height:100%">
60 <div id="silverlightControlHost">
61 <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
62 ; <param name="source" value="ClientBin/Html_SilverlightChina.xap"/>
63 <param name="onError" value="onSilverlightError" />
64 <param name="background" value="white" />
65 <param name="minRuntimeVersion" value="3.0.40818.0" />
66 <param name="autoUpgrade" value="true" />
67 <a href="//go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
68 <img src="//go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
69 </a>
70 </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
71 </form>
72 </body>
73 </html>
3. 在上面的HTML代碼中，主要代碼分為三部分，第一部分是樣式表CSS代碼，第二部分是Javascript腳本代碼，第三部分是HTML Body代碼。
對于CSS樣式代碼，這里不再贅述。我們來分析一下Javascript代碼和HTML Body代碼。首先說說Javascript腳本代碼，在Javascript腳本中，有一個onSilverlightError函數，該函數的功能是處理Silverlight應用外部異常錯誤信息的。例如，如果瀏覽器無法下載XAP文件，該錯誤信息會由onSilverlightError函數處理，將會在瀏覽器中彈出報錯窗口，出現報錯時，Silverlight應用將停止運行。onSilverlightError函數作為默認的外部錯誤信息處理函數，在Silverlight中是這樣調用的：
<param name="onError" value="onSilverlightError" />
而通過Javascript中的
傳遞錯誤信息到瀏覽器。 當然，開發人員可以根據需求自定義錯誤處理函數，或者修改錯誤處理函數。例如，修改errMessage為errorLocation.InnerHTML,錯誤信息顯示也會不同。
4. <Object>標簽是調用Silverlight的主要標簽，該標簽中包含了很多屬性標簽，其中關鍵的屬性是"type"，該標簽標識了該Silverlight應用所需要的Silverlight版本。在本應用中，我建立的是Silverlight 3應用，type="application/x-silverlight-2"， 該標簽和Silverlight 2 的type標簽內容相同，我查看了Silverlight 3 Release Note，微軟解釋是為了Silverlight2應用升級到Silverlight3兼容性，使用相同標簽內容。我看了一下Silverlight beta 2版本的標簽，是type="application/x-silverlight-2-b2"。
1 <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
2 <param name="source" value="ClientBin/Html_SilverlightChina.xap"/>
3 <param name="onError" value="onSilverlightError" />
4 <param name="background" value="white" />
5 <param name="minRuntimeVersion" value="3.0.40818.0" />
6 <param name="autoUpgrade" value="true" />
7 <a href="//go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
8 <img src="//go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
9 </a>
10 </object>
在<Object>標簽中，<param>標簽定義了Silverlight實例參數。其中"source"是比較重要的一個參數，標識XAP文件的位置。有些時候，根據項目需要，也可以將source留為空，然后在XAML中使用Javascript代碼進行調用。
對于Object的參數，我想使用一個表格來列述：
|
參數
|
介紹
|
|
AutoUpgrade
|
允許開發人員控制終端用戶的Silverlight是否自動升級。默認為True
|
|
Background
|
設置應用背景顏色，默認為Null
|
|
enableFramerateCounter
|
是否在瀏覽器狀態欄顯示當前幀速率，默認為false
|
|
enableHtmlAccess
|
是否允許訪問瀏覽器DOM，默認為false，如果為true，將允許Silverlight訪問網頁
|
|
iniParams
|
初始化參數信息，通過該參數可以從網頁傳遞參數到Silverlight應用中，在Silverlight中可以通過后臺代碼獲取參數（非常有用）
|
|
minRuntimeVersion
|
運行該應用的最低Silverlight版本，在本例中，最低版本是Silverlight 3.0.40818.0
|
|
maxFramerate
|
設置最大的幀速率，默認是每秒60幀
|
|
onLoad
|
可以在本事件中調用自定義Javascript函數
|
|
splashScreenSource
|
設置一個xaml文件作為下載XAP的時候，動畫開始頁面
|
|
Source
|
XAP路徑
|
5. 在<Object>中有一段代碼是這樣的：
<a href="//go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
<img src="//go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
; </a>
這段代碼是檢測如果瀏覽器沒有安裝Silverlight客戶端插件，會顯示"Get Silverlight"的圖片，提示用戶下載并安裝Silverlight客戶端。有的國內的開發人員認為每次到微軟網站下載速度太慢，可以修改""鏈接,讓用戶到本地或者指定連接下載Silverlight客戶端插件。
我們來完成上面的項目，添加簡單代碼，完成演示，
我上傳了一個XAP文件到cnblogs，下面我使用以下代碼調用即可。
代碼
1 <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
2 <param name="source" value="/jv9/Html_SilverlightChina.xap"/>
3 ; <param name="onError" value="onSilverlightError" />
4 <param name="background" value="white" />
5 <param name="minRuntimeVersion" value="3.0.40818.0" />
6 ; <param name="autoUpgrade" value="true" />
7 ; <a href="//go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
8 ; <img src="//go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
9 </a>
10 </object>
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：博客園
半島外圍網上直營 
140次
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線