Silverlight - 浏览器集成

在本章中，我们将了解如何使用浏览器集成支持将Silverlight应用程序与网页结合使用.

我们可以探索Silverlight与浏览器的集成以下两种方式 :

• 在浏览器中运行的JavaScript代码可以访问Silverlight应用程序中的功能.

• Silverlight能够为对象提供JavaScript包装器.由于Silverlight .NET JavaScript对象的包装，因此在Silverlight插件中运行的 .NET 代码可以访问HTML DOM和其他浏览器脚本功能.

我们将看到基于浏览器的软件应用程序如何在客户端上持久存储信息.

Silverlight和HTML

就HTML世界而言，Silverlight内容只是一个元素.这适用于布局.整个Silverlight插件及其所有内容看起来只是一个对象元素.

你必须记住 :

• Silverlight不是HTML的替代品，它旨在补充它.因此，只能访问DOM中的另一个元素非常重要.

• 它使您可以在适当的时候使用Silverlight.

• 在主要使用HTML的页面上，Silverlight与浏览器世界的集成不仅仅是作为DOM元素存在，还受普通HTML布局的限制.

访问DOM

Silverlight内容必须能够完全参与网页.因此，它应该能够访问HTML DOM. Silverlight提供桥接对象，将浏览器脚本对象包装为Dot Net对象，即系统中的 Script对象类.浏览器命名空间提供了一些方法，使您可以读取和写入属性并在浏览器脚本对象上提供函数.

您需要一种方法来获取Script对象. Silverlight提供了一个HTML页面类，使您可以访问各种功能页面，例如Script对象.

让我们看一个简单的示例，其中我们有一个简单的脚本创建一个具有一些属性的对象.其中一些只是值，其中一些是函数.

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

下面给出了添加按钮的XAML代码.

这是按钮点击实现，其中调用了一个在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文件.

                                  myJsObject = {             answer: 42,             message: "Hello, world",             modifyHeading: function(title) {                document.getElementById('heading').innerHTML = title; },             performReallyComplexCalculation: function(x, y) { return x + y; }          };                                  html, body {             height: 100%;             overflow: auto;          }          body {             padding: 0;             margin: 0;          }          #silverlightControlHost {             height: 100%;          }                             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);          }