在本章中，我们将了解如何使用浏览器集成支持将Silverlight应用程序与网页结合使用.
我们可以探索Silverlight与浏览器的集成以下两种方式 :
在浏览器中运行的JavaScript代码可以访问Silverlight应用程序中的功能.
Silverlight能够为对象提供JavaScript包装器.由于Silverlight .NET JavaScript对象的包装，因此在Silverlight插件中运行的 .NET 代码可以访问HTML DOM和其他浏览器脚本功能.
我们将看到基于浏览器的软件应用程序如何在客户端上持久存储信息.
就HTML世界而言，Silverlight内容只是一个元素.这适用于布局.整个Silverlight插件及其所有内容看起来只是一个对象元素.
你必须记住 :
Silverlight不是HTML的替代品，它旨在补充它.因此，只能访问DOM中的另一个元素非常重要.
它使您可以在适当的时候使用Silverlight.
在主要使用HTML的页面上，Silverlight与浏览器世界的集成不仅仅是作为DOM元素存在，还受普通HTML布局的限制.
Silverlight内容必须能够完全参与网页.因此，它应该能够访问HTML DOM. Silverlight提供桥接对象，将浏览器脚本对象包装为Dot 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代码.
<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文件.
<!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文件中提取的.
