Silverlight之Silverlight和HTML(DOM,JS)交互 (转载)

Silverlight虽然是以插件形式来显示的，但是它和JS以及HTML的交互还是很方便的，下面一一道来

Silverlight得到浏览器的信息：

BrowserInformation b = HtmlPage.BrowserInformation;
lblInfo.Text = "Name: " + b.Name;
lblInfo.Text += "\nBrowser Version: " + b.BrowserVersion.ToString();
lblInfo.Text += "\nPlatform: " + b.Platform;
lblInfo.Text += "\nCookies Enabled: " + b.CookiesEnabled;
lblInfo.Text += "\nUser Agent: " + b.UserAgent;

Name，得到浏览器名称

BrowserVersion得到浏览器版本

Platform，得到运行平台信息

CookiesEnabled,得到一个值标识是否启用Cookie

UserAgent得到当前代理信息

打开一个窗口，效果等同于window.open:

HtmlPage.PopupWindow，打开一个窗口，可以指定HtmlPopupWindowOptions参数，

                HtmlPopupWindowOptions options = new HtmlPopupWindowOptions();
                options.Height = 200;
                options.Width = 200;
                options.Toolbar = false;
                options.Status = false;
                options.Resizeable = false;
                options.Location = false;
                HtmlPage.PopupWindow(new Uri("http://www.baidu.com"), null, options);

HtmlPopupWindowOptions 可以指定页面的属性，高度、宽度地址栏之类的属性，其实PopupWindow的原理就是调用了js的Window.Open方法.

切记，PopopWindow只能在事件(触发)中起作用，也就意味着不能一开始就显示,另外其中的Url必须是绝对路径。

HtmlDocument,表示一个完整的 Html的 Document对象，可以使用HtmlPage.Document得到

主要属性：

DocumentUri：得到当前页面的URL地址

QueryString：得到传递的参数

DocumentElement:得到HtmlDocument对象

Body:得到Body节点(HtmlElement类型)

Cookies:Cookie的支持，很有用

CreateElement():创建一个HtmlElement节点(一个Html的标签元素)

AttachEvent():给Html元素附加脚本事件

DetachEvent():删除脚本事件

Submit():提交页面，如果Silverlight在aspx页面很有用，可以执行服务器代码

操作HtmlElement：

AppendChild()：追加HtmlElement对象

RemoveChild()：移除HtmlElement

Focus()：使HtmlElement元素获得焦点

GetAttribute(),
SetAttribute(), and
RemoveAttribute()： 得到或者设置或移除HtmlElement的属性(本身Html DOM 存在的，不是自己指定的)

GetStyleAttribute(),
SetStyleAttribute(),
RemoveStyleAttribute()：得到或者设置或移除HtmlElement的样式属性

GetProperty() and
SetProperty()：得到或者设置HtmlElement的属性(自己添加的或者是作为了HtmlElement的一部分的属性比如 innerHTML)

AttachEvent() and
DetachEvent()：附加和移除JS脚本事件

HTML DOM 的事件:

onchange 值改变的时候触发

onclick 单击事件

onmouseover 鼠标悬浮事件

onmouseout 鼠标离开事件

onkeydown 键盘按下事件

onkeyup 键盘放开事件

onselect 当Select被选择时候

onfocus 获得焦点

onblur 失去焦点

onabort 用户去掉图片下载

onerror 发生错误时候

onload 页面加载事件

onunload 页面关闭(或者通过超链跳转，新页面显示之前执行)

在Silverlight调用JS方法的：

第一种调用方法：

现有JS函数如下：

        function changeParagraph(newText) {
            var element = document.getElementById("ptest");
            element.innerHTML = newText;
        }

使用ScriptObject对象实现调用，通过HtmlPage.Window.GetProperty("changeParagraph")得到Object对象，其中的参数就是JS方法的名称

然后使用ScriptObject调用InvokeSelf方法，参数就是JS方法的参数(如果有参数就传递，否则就不传递)

 ScriptObject script = (ScriptObject)HtmlPage.Window.GetProperty("changeParagraph");
 script.InvokeSelf("Changed through JavaScript");

第二种方法：

现有JS函数如下：

这个JS方法使用了对象的方式，并且还赋予了属性为一个Function

  myHello = function(message)
    {
        this.Message = message;
    }

    myHello.prototype.Display = function()
    {
        var resultSpan = $get("result");
        resultSpan.innerText = "Hello " + this.Message;
    }

可以看到获取ScriptObject的方式变化了，因为这个JS使用了对象的方式在使用，同时他的属性prototype有一个Display的属性(一个Function)，

然后使用ScriptObject对象的Invoke方法参数为prototype的属性名称。

ScriptObject    script=HtmlPage.Window.CreateInstance("myHello",this.input.Text);      

object result = script.Invoke("Display");//执行这个方法之后既会执行myHello方法也会执行Display方法

在JS中访问Silverlight中的函数：

①脚本化的类必须是 public 的

②需要脚本化的属性、方法、事件要标记为 [ScriptableMember]

③如果类(XAML页面)被标记为 [ScriptableType]，则意味着其属性、方法、事件都是可被访问的

④使用HtmlPage.RegisterScriptableObject()或者HtmlPage.RegisterCreateableType()进行注册，

前者注册一个对象，后者注册一个类型

⑤给我们的obejct标签添加一个唯一的ID(在JS中通过这个插件来访问Silverlight注册的函数)

看看类的代码实现：

Class Scriptable
{
        [ScriptableMember]
        public string Hello(string name)
        {
            return string.Format("Hello: {0}", name);
        }
}

然后在一个XAML中进行注册：

//sriptableMemberAttribute实例化要本化的类 Sriptable s = new Scriptable() { CurrentTime = DateTime.Now };
//将 Scriptable 对象注册到客户端中，所对应的客户端的对象名为 scriptable  HtmlPage.RegisterScriptableObject("scriptable", s);

在JS中访问：

var slPlugin = $get('Xaml1');
//其中的scriptable为注册在客户端的脚本化对象的名字 var obj = document.getElementById("xaml1").content.scriptable;
//调用脚本化类得方法，其中Hello为类中的方法 output.innerHTML += obj.Hello("webabcd");     

注册一个XAML页面：

[ScriptableType()]
public partial class ScriptableSilverlight: UserControl
{
public ScriptableSilverlight()
{
InitializeComponent();
HtmlPage.RegisterScriptableObject("Page", this);
}
[ScriptableMember()]
public void ChangeText(string newText)
{
lbl.Text = newText;
}
}

JS中的调用

function updateSilverlightText()
{
var control = document.getElementById("silverlightControl");
control.content.Page.ChangeText(
"This TextBlock has been updated through JavaScript.");
}

和刚才的方式一摸一样

上边的例子是使用 HtmlPage.RegisterScriptableObject的方式注册一个对象，接下来使用HtmlPage.RegisterCreateableType注册一个类型：

看看类的代码，一个简单的类和简单的方法：

[ScriptableType()]
public class RandomNumbers
{
private Random random = new Random();
[ScriptableMember()]
public int GetRandomNumberInRange(int from, int to)
{
return random.Next(from, to+1);
}
}

在XAML中进行注册：

第一个参数只是对象的名字称号，第二个就是类型

HtmlPage.RegisterCreateableType("RandomNumbers", typeof(RandomNumbers));

在JS中访问这个类中的这个GetRandomNumberInRange方法：

看到和上边的区别了吧，没错上边是“document.getElementById("xaml1").content.scriptable;”而这里是使用content.services.createObject()方法，

参数就是在XAML中使用“HtmlPage.RegisterCreateableType”注册的第一个参数，得到一个注册的对象，然后使用对象访问GetRandomNumberInRange

方法，如果有参数则传递。

function getRandom1To6()
{
var control = document.getElementById("silverlightControl");
var random = control.content.services.createObject("RandomNumbers");
alert("Your number is: " + random.GetRandomNumberInRange(1, 6));
}

HTML和Silverlight交互的安全性，下边这两个配置可以保护：

<param name="enableHtmlAccess" value="false" />设置为false之后则无法使用Document, Window, Plugin, BrowserInformation ，但是可以使用HtmlPage.PopupWindow();

<param name="allowHtmlPopupwindow" value="false" />如果为false，则无法使用HtmlPage.PopupWindow();

好了，Silverlight和HTML的交互就到这里吧，希望大家指出错误的地方。