穩紮穩打Silverlight(27) - 2.0網頁之可腳本化, 與DOM的互動, 與JavaScript的互動

<a href="http://down.51cto.com/data/100302">[源碼下載下傳]</a>

介紹

Silverlight 2.0 使用c#開發可腳本化的代碼，Silverlight與宿首頁面的DOM之間的互動，Silverlight與宿首頁面的JavaScript之間的互動

ScriptableMemberAttribute - 需要腳本化的屬性、方法、事件要标記為此

HtmlPage.RegisterScriptableObject - 将可腳本化對象注冊到用戶端

HtmlElement - 表示網頁的文檔對象模型 (DOM) 中的 HTML 元素

HtmlWindow - 提供 JavaScript 的 window 對象的 Silverlight 端的托管表示形式

線上DEMO

<a href="http://webabcd.blog.51cto.com/1787395/342779">http://webabcd.blog.51cto.com/1787395/342779</a>

示例

1、Silverlight對可腳本化的支援

Scriptable.cs

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Browser;

namespace Silverlight20.WebPage

{

* 腳本化的類必須是 public 的

* 需要腳本化的屬性、方法、事件要标記為 [ScriptableMember]

* 如果類被标記為 [ScriptableType]，則意味着其屬性、方法、事件都是ScriptableMemberAttribute

/// <summary>

/// 用于示範腳本化的類

/// </summary>

// [ScriptableType]

public class Scriptable

{

/// <summary>

/// 目前服務端的時間

/// </summary>

[ScriptableMember]

public DateTime CurrentTime { get; set; }

/// Hello 方法

/// <param name="name">名字</param>

/// <returns></returns>

public string Hello(string name)

{

return string.Format("Hello: {0}", name);

}

/// 開始事件

public event EventHandler<StartEventArgs> Start;

/// 觸發開始事件所調用的方法

/// <param name="dt"></param>

public void OnStart(DateTime dt)

if (Start != null)

{

Start(this, new StartEventArgs()

{

CurrentTime = dt

});

}

/// 開始事件的 EventArgs

public class StartEventArgs : EventArgs

}

ScriptableDemo.xaml.cs

using System.Collections.Generic;

using System.Linq;

public partial class ScriptableDemo : UserControl

System.Threading.Timer _timer;

System.Threading.SynchronizationContext _syncContext;

public ScriptableDemo()

InitializeComponent();

this.Loaded += new RoutedEventHandler(ScriptableDemo_Loaded);

void ScriptableDemo_Loaded(object sender, RoutedEventArgs e)

// UI 線程

_syncContext = System.Threading.SynchronizationContext.Current;

Scriptable s = new Scriptable() { CurrentTime = DateTime.Now };

// 将 Scriptable 對象注冊到用戶端中，所對應的用戶端的對象名為 scriptable

HtmlPage.RegisterScriptableObject("scriptable", s);

_timer = new System.Threading.Timer(MyTimerCallback, s, 0, 1000);

private void MyTimerCallback(object state)

Scriptable s = state as Scriptable;

// 每秒調用一次 UI 線程上的指定的方法

_syncContext.Post(OnStart, s);

void OnStart(object state)

// 調用 Scriptable 對象的 OnStart() 方法，以觸發 Start 事件

s.OnStart(DateTime.Now);

ScriptableDemo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Silverlight20</title>

html, body

height: 100%;

overflow: auto;

body

padding: 0;

margin: 0;

#silverlightControlHost

</style>

function scriptableDemo() {

// scriptable - Silverlight 注冊到用戶端的對象

var obj = document.getElementById("xaml1").content.scriptable;

var output = document.getElementById('result');

output.innerHTML += obj.CurrentTime

output.innerHTML += '<br />';

output.innerHTML += obj.Hello("webabcd");

// obj.Start = responseStart;

// addEventListener - 添加事件監聽器

// removeEventListener - 移除事件監聽器

obj.addEventListener("Start", responseStart);

function responseStart(sender, args) {

document.getElementById('result').innerHTML += args.CurrentTime;

document.getElementById('result').innerHTML += '<br />';

</script>

</head>

<body>

</div>

加載了 Silverlight20.WebPage.ScriptableDemo 後，單擊這裡以測試 Silverlight 對可腳本化的支援</div>

width="100%" height="100%">

</object>

</body>

</html>

2、Silverlight與網頁的DOM之間的互動

DOMDemo.xaml

<UserControl x:Class="Silverlight20.WebPage.DOMDemo"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</StackPanel>

</UserControl>

DOMDemo.xaml.cs

public partial class DOMDemo : UserControl

public DOMDemo()

Demo();

void Demo()

// 擷取目前頁面的 id 為 hello 的DOM，并設定其樣式

HtmlElement container = HtmlPage.Document.GetElementById("hello");

container.SetStyleAttribute("display", "block");

// 建立一個 ul

HtmlElement ul = HtmlPage.Document.CreateElement("ul");

for (int i = 0; i < 10; i++)

// 建立一個 li ，并設定其顯示的内容

HtmlElement li = HtmlPage.Document.CreateElement("li");

li.SetAttribute("innerText", "hi: DOM");

// 将 li 添加到 ul 内

ul.AppendChild(li);

// 将 ul 添加到 id 為 hello 的 DOM 内

container.AppendChild(ul);

// 建立一個頁面的 button ，并設定其 value 屬性和 onclick 事件

HtmlElement button = HtmlPage.Document.CreateElement("button");

button.SetProperty("value", "hi: Silverlight");

button.AttachEvent("onclick", new EventHandler<HtmlEventArgs>(HelloClick));

// 将 button 添加到 id 為 hello 的 DOM 内

container.AppendChild(button);

void HelloClick(object sender, HtmlEventArgs e)

// 頁面的 button 單擊後所需執行的邏輯

txtMsg.Text += "hi: Silverlight\r\n";

DOMDemo.html

加載 Silverlight20.WebPage.DOMDemo 後，測試 Silverlight 和頁面 DOM 的互動</div>

</html>

3、Silverlight與網頁的JavaScript之間的互動

JSDemo.xaml

<UserControl x:Class="Silverlight20.WebPage.JSDemo"

JSDemo.xaml.cs

public partial class JSDemo : UserControl

public JSDemo()

this.Loaded += new RoutedEventHandler(JSDemo_Loaded);

private void invokeJS_Click(object sender, RoutedEventArgs e)

// 調用頁面的 JavaScript 方法

HtmlPage.Window.Invoke("silverlightInvokeJS", "webabcd");

// 執行任意 JavaScript 語句

HtmlPage.Window.Eval("silverlightInvokeJS('webabcd2')");

void JSDemo_Loaded(object sender, RoutedEventArgs e)

HtmlPage.Document.GetElementById("btnHello").SetStyleAttribute("display", "inline");

// 将此對象注冊到用戶端中，所對應的用戶端的對象名為 silverlightObject

HtmlPage.RegisterScriptableObject("silverlightObject", this);

/// 暴露給頁面的方法，調用後在 Silverlight 中顯示結果

[ScriptableMember] // 腳本化此方法

public void hello(string name)

txtMsg.Text += string.Format("Hello: {0}\r\n", name);

JSDemo.html

function silverlightInvokeJS(name) {

// Silverlight 調用 JavaScript 方法，在頁面上顯示結果

document.getElementById('result').innerHTML += "hello: " + name + "<br />";

function jsInvokeSilverlight(name) {

// JavaScript 調用 Silverlight 方法，在 Silverlight 上顯示結果

var obj = document.getElementById("xaml1").content.silverlightObject;

obj.hello(name);

加載 Silverlight20.WebPage.JSDemo 後，測試 Silverlight 和頁面 JavaScript 的互動

<input type="button" id="btnHello" value="HelloSilverlight"

style="display: none" />

<a href="http://down.51cto.com/data/100302" target="_blank">[源碼下載下傳]</a>

本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/343915，如需轉載請自行聯系原作者

穩紮穩打Silverlight(27) - 2.0網頁之可腳本化, 與DOM的互動, 與JavaScript的互動

繼續閱讀

七牛雲-C#SDK-上傳-前期準備

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

[轉]iOS微信小視訊優化心得

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

android 主線程的相關問題

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條