淺析Silverlight嵌入HTML的實現(xiàn)方法
對于Silverlight嵌入HTML的開發(fā)方法，在今后的頁面開發(fā)中比較常見，需要控制的大多是嵌入插件。通過了解Silverlight嵌入HTML，能對大家今后的日常開發(fā)有所幫助。
Object元素可以被用于Silverlight插件的HTML嵌入和配置，但是要在瀏覽器兼容的方式下進行。比較常見的應(yīng)用有倆種，一個是嵌入Silverlight 插件，并將該應(yīng)用程序指定給宿主。另一個是指定在未安裝Silverlight 時顯示的備用HTML。
這些應(yīng)用對應(yīng)于 HTML 頁的不同部分，尤其是，對應(yīng)于object 元素的不同配置參數(shù)。首先我們來介紹怎樣使用每個過程中的代碼段。***把他們結(jié)合起來，就確保得到了跨瀏覽器兼容性，并基于 Visual Studio 和 Expression Blend 用來動態(tài)生成測試頁的模板。
嵌入插件
將object 元素添加到HTML，并指定屬性和子param 元素。
- <object width="300" height="300"
- data="data:application/x-silverlight-2,"
- type="application/x-silverlight-2" >
- <param name="source" value="SilverlightApplication1.xap"/>
- </object>
width 和 eight 屬性是跨瀏覽器兼容性所必需的。可以相對于父元素的寬度和高度指定固定像素值或百分比。如果使用相對大小調(diào)整，可以通過處理 Content.Resized 事件對插件大小的更改做出響應(yīng)。
type 屬性和顯示的特定值也是必需的。此值使用 Silverlight MIME 類型來標(biāo)識插件和必需的版本。建議使用 data 屬性及其值，以避免某些瀏覽器出現(xiàn)性能問題。請注意數(shù)據(jù)值的尾隨逗號。它表示具有空值的第二個數(shù)據(jù)參數(shù)。名為 source 的 param 元素是必需的，該元素表示應(yīng)用程序文件的位置和名稱。通常在相對于 HTML 文件的位置指定一個 .xap 應(yīng)用程序包。
指定要在未安裝 Silverlight 時顯示的備用HTML
向子param元素后的object元素添加HTML內(nèi)容。
- <object id="SilverlightPlugin1" width="300" height="300"
- data="data:application/x-silverlight-2,"
- type="application/x-silverlight-2" >
- <param name="source" value="SilverlightApplication1.xap"/>
- <!-- Display installation image. -->
- <a href="http://go.microsoft.com/fwlink/?LinkID=149156"
- style="text-decoration: none;">
- <img src="http://go.microsoft.com/fwlink/?LinkId=108181"
- alt="Get Microsoft Silverlight"
- style="border-style: none"/>
- </a>
- </object>
該示例顯示了默認安裝映像源和安裝程序URI。使用這些URI，服務(wù)器可以檢測到用戶的瀏覽器設(shè)置以提供正確版本的安裝映像和安裝程序。如果用戶的瀏覽器不受支持，單擊映像可使瀏覽器打開Silverlight Requirements頁。
為了將Silverlight安裝體驗集成到網(wǎng)頁中，可以任意提供復(fù)雜的備用HTML。不過，在許多情況下，用戶必須在安裝 Silverlight 后重新啟動或刷新瀏覽器。對于 Internet Explorer 而言，只需要刷新瀏覽器，除非用戶安裝的是早期版本的Silverlight 并通過安裝鏈接升級。也可以自動刷新瀏覽器，或者通過使用Silverlight.js 文件中的幫助器功能取消刷新要求。還可以使用Silverlight.js 執(zhí)行細化的瀏覽器要求檢測。
下面的代碼示例提供了使用整個瀏覽器窗口的Silverlight 應(yīng)用程序的完整HTML頁。該示例基于當(dāng)您選擇動態(tài)生成測試頁時Visual Studio 所使用的默認HTML。該示例使用級聯(lián)樣式表 (CSS) 和 div 元素來包含插件。這可以確保插件延伸到瀏覽器窗口的邊緣。此元素和其他附加到HTML 的元素有助于確保跨瀏覽器兼容。
iframe元素也用于確保跨瀏覽器兼容性。iframe 的存在可避免 Safari 瀏覽器緩存頁面。當(dāng)用戶向后導(dǎo)航到以前訪問過的Silverlight 頁面時，Safari 緩存可避免重新加載Silverlight 插件。該示例使用JavaScript 函數(shù)處理插件的OnError 事件。JavaScript 錯誤處理程序在調(diào)試過程中很有用，但通常在部署應(yīng)用程序時將其移除。
本示例還包含minRuntimeVersion 和autoUpgrade 設(shè)置以便在未安裝指定Silverlight 版本時提供升級體驗。若要在Web 瀏覽器窗口中查看該示例，必須在source 參數(shù)中指定有效的 Silverlight 應(yīng)用程序包。
Silverlight嵌入HTML代碼
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html >
- <!-- saved from url=(0014)about:internet -->
- <head>
- <title>SilverlightApplication1</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">
- 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>
- <div id="silverlightControlHost">
- <object width="100%" height="100%"
- type="application/x-silverlight-2"
- data="data:application/x-silverlight-2," >
- <param name="source" value="SilverlightApplication1.xap"/>
- <param name="onerror" value="onSilverlightError" />
- <param name="background" value="white" />
- <param name="minRuntimeVersion" value="3.0.40620.0" />
- <param name="autoUpgrade" value="true" />
- <a href="http://go.microsoft.com/fwlink/?LinkID=149156"
- style="text-decoration: none;">
- <img
- src="http://go.microsoft.com/fwlink/?LinkId=108181"
- alt="Get Microsoft Silverlight"
- style="border-style: none"/>
- </a>
- </object>
- <iframe id="_sl_historyFrame"
- style='visibility:hidden;height:0px;width:0px;border:0px'>
- </iframe>
- </div>
- </body>
- </html>
其實Silverlight程序是以控件的形式嵌入到HTML頁面中的，這里是把將要整合的HTML頁面利用iframe置于Silverlight控件之上，而不影響Silverlight控件的正常工作。
操作要點：1.編輯按鈕的xaml，定義MouseLeftButtonDown，使按下鼠標(biāo)左鍵時，觸發(fā)相應(yīng)函數(shù)。2.在該頁面的js文件中，關(guān)聯(lián)按鈕。
代碼：
- function On_MouseLeftButtonDown(sender,args){
- document.getElementById('iframe').style.visibility = "visible";
- }
- //開啟HTML頁面，將名為iframe的隱藏層的visibility屬性改為visible顯示
- function Off_MouseLeftButtonDown(sender,args){
- document.getElementById('iframe').style.visibility = "hidden";
- }
- //關(guān)閉HTML頁面，將名為iframe的隱藏層的visibility屬性改為hidden隱藏
3.該項目的html文件。
代碼：
- <div id="iframe" style="position：absolute； width：640px； height：450px； z-index：1； left： 10px； top： 45px；visibility：hidden">
- <iframe scrolling="no" style="position：fixed； width：640px； height：450px；" src="http：//www.mdong.org/qdjw" />
- </div>
- // 將iframe嵌入一個div層，并通過調(diào)整z-index值與visibility屬性將該層置于Silverlight控件層上方并隱藏，以不影響Silverlight程序正常工作。
- //調(diào)整DIV層的位置大小。
也可以通過修改Silverlight中的isWindowless屬性為TRUE，然后利用<dir>來進行覆蓋。當(dāng)然，還是以Silverlight來實現(xiàn)的方案比較***，不過，***的例子也不失為一種快速的解決方案。
【編輯推薦】
