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的互動就到這裡吧，希望大家指出錯誤的地方。