Silverlight - 瀏覽器整合

上一頁
下一頁

本章我們將瞭解 Silverlight 應用程式如何利用瀏覽器整合支援與網頁協同工作。

我們可以透過以下兩種方式探索 Silverlight 與瀏覽器的整合：

  • 在瀏覽器中執行的 JavaScript 程式碼可以訪問 Silverlight 應用程式中的功能。

  • Silverlight 能夠為物件提供 JavaScript 包裝器。由於 Silverlight 為 JavaScript 物件提供了 .NET 包裝器，因此在 Silverlight 外掛中執行的 .NET 程式碼可以訪問 HTML DOM 和其他瀏覽器指令碼功能。

我們將瞭解基於瀏覽器的軟體應用程式如何持久地將資訊儲存在客戶端。

Silverlight 和 HTML

就 HTML 世界而言，Silverlight 內容只是一個單一元素。這對於佈局也是正確的。整個 Silverlight 外掛及其所有內容看起來都像一個單一的物件元素。

您必須記住：

  • Silverlight 並非 HTML 的替代品，而是旨在對其進行補充。因此，能夠訪問 DOM 中的另一個元素非常重要。

  • 它使您能夠在適當的地方使用 Silverlight。

  • 在一個主要使用 HTML 的頁面上，Silverlight 與瀏覽器世界的整合不僅僅是作為 DOM 元素存在，它還受正常的 HTML 佈局影響。

訪問 DOM

Silverlight 內容必須能夠完全參與網頁。因此，它應該能夠訪問 HTML DOM。Silverlight 提供了包裝瀏覽器指令碼物件作為 .NET 物件的橋接物件，即系統中的 **Script 物件** 類。瀏覽器名稱空間提供允許您讀取和寫入屬性以及在瀏覽器指令碼物件上呼叫函式的方法。

首先，您需要一種獲取 Script 物件的方法。Silverlight 提供了一個 HTML 頁面類，使您可以訪問各種頁面功能，例如 Script 物件。

讓我們來看一個簡單的示例，其中我們有一個簡單的指令碼，該指令碼建立一個具有幾個屬性的物件。其中一些只是值，另一些是函式。

<script type = "text/javascript">  
   myJsObject = { 
      answer: 42, 
      message: "Hello, world", 
      modifyHeading: function(title) 
         { document.getElementById('heading').innerHTML = title; }, 
      performReallyComplexCalculation: function(x, y) { return x + y; } 
   }; 
     
</script>

以下是新增按鈕的 XAML 程式碼。（此處應插入實際的XAML程式碼）

<UserControl x:Class = "DomAccess.Page" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"  
   Width = "400" Height = "300"> 
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Button x:Name = "useDomButton" Content = "Use DOM" Width = "75" Height = "30" 
         Click = "useDomButton_Click" /> 
   </Grid>
	
</UserControl>

這是按鈕單擊實現，其中呼叫了在 HTML 檔案中建立的指令碼。（此處應插入實際的程式碼）

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes;
using System.Windows.Browser; 

using System.Diagnostics; 
 
namespace DomAccess { 

   public partial class Page : UserControl { 
	
      public Page() { 
         InitializeComponent(); 
      } 
   
      private void useDomButton_Click(object sender, RoutedEventArgs e) { 
         ScriptObject myJsObject = HtmlPage.Window.GetProperty("myJsObject") as ScriptObject;  
         string[] propertyNames = { "answer", "message", "modifyHeading", 
            "performReallyComplexCalculation" }; 
				
         foreach (string propertyName in propertyNames) { 
            object value = myJsObject.GetProperty(propertyName); 
            Debug.WriteLine("{0}: {1} ({2})", propertyName, value, value.GetType()); 
         }
			
         object result = myJsObject.Invoke("performReallyComplexCalculation", 11, 31);  
         HtmlElement h1 = HtmlPage.Document.GetElementById("heading"); 
         h1.SetProperty("innerHTML", "Text from C# (without JavaScript's help)"); 
         h1.SetStyleAttribute("height", "200px"); 
      } 
   } 
}

以下是完整的 HTML 檔案。（此處應插入實際的HTML程式碼）

<!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" > 
   <!-- saved from url = (0014)about:internet --> 
	
   <head> 
      <title>DomAccess</title>  
		
      <script type = "text/javascript">  
		
         myJsObject = { 
            answer: 42, 
            message: "Hello, world", 
            modifyHeading: function(title) { 
               document.getElementById('heading').innerHTML = title; }, 
            performReallyComplexCalculation: function(x, y) { return x + y; } 
         }; 
     
      </script> 
     
      <style type = "text/css"> 
		
         html, body { 
            height: 100%; 
            overflow: auto; 
         } 
			
         body { 
            padding: 0; 
            margin: 0; 
         } 
			
         #silverlightControlHost { 
            height: 100%; 
         }
			
      </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; 
             
            var errMsg = "Unhandled Error in Silverlight 2 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> 
	
      <!-- Runtime errors from Silverlight will be displayed here. 
         This will contain debugging information and should be removed or hidden when 
         debugging is completed -->
			
      <div id = 'errorLocation' style = "font-size: small;color: Gray;"></div> 
		
      <h1 id = 'heading'></h1>
		
      <div id = "silverlightControlHost"> 
		
         <object data = "data:application/x-silverlight-2," 
            type = "application/x-silverlight-2" width = "100%" height = "100%"> 
				
            <param name = "source" value = "ClientBin/DomAccess.xap"/> 
            <param name = "onerror" value = "onSilverlightError" /> 
            <param name = "background" value = "white" /> 
            <param name = "minRuntimeVersion" value = "2.0.30923.0" /> 
            <param name = "autoUpgrade" value = "true" /> 
				
            <a href = "http://go.microsoft.com/fwlink/?LinkID=124807" 
               style = "text-decoration: none;"> 
               <img src = "http://go.microsoft.com/fwlink/?LinkId=108181" 
               alt = "Get Microsoft Silverlight" style = "border-style: none"/> 
            </a> 
				
         </object>
			
         <iframe style = 'visibility:hidden;height:0;width:0;border:0px'></iframe> 
			
      </div> 
		
   </body> 
	
</html>

編譯並執行上述程式碼後，您將在輸出視窗中看到從 HTML 檔案中獲取的所有值。

Accessing DOM
列印頁面
上一頁
下一頁
廣告