自学silverlight 5.0Silverlight与Html/JavaScript互操作。

5属于客户端的东西,本篇介绍Silverlight和Html/Javascript的互操作性.当然Silverlight可以使用多种托管语言

即时是一个silverlight游戏:http://keleyi.com/keleyi/phtml/silverlight/

转自:http://www.cnblogs.com/cofd/archive/2007/11/28/975116.html

前段时间写了Flex和JavaScript互操作,
本篇介绍Silverlight和Html/Javascript的互操作性.当然Silverlight可以用多种托管语言,
我此使用C#.

摘要:

先行介绍一下System.Windows.Browser取名空间下的几乎单近乎,
接着介绍Silverlight如何操纵Html元素,
最后介绍如何由Javascript调用Silverlight的艺术,
以及Silverlight调用Javascript方法.

1.System.Windows.Browser

Silverlight 提供了平组对象来叙述Html文档对象模型(DOM), 包括HtmlPage,
HtmlDocument, HemlElement, HtmlElementCollection, 等等.
我们可以通过这些目标从Silverlight访问Html页面的情节, 如获取有Html元素,
导航到新的URL等.(ps:Silverlight 1.1 Complete API
List)

率先看HtmlPage类,
其提供了浏览器信息之静态属性BrowserInformation;提供的静态方法Navigate,
可以便宜之跳转至其它的web页.提供了Document属性访问Html Dom,
有矣它就是好提到多事了

HtmlDocument/HemlElement类用来访问DOM,
有了DOM就得像Javascript一样做任何事了.

顾: 如果要Silverlight可以看Html页面的情节,
在创造Silverlight控件的下要将enableHtmlAccess设为true.

2.Silverlight操纵Html

想象Javascript是怎么看Html元素的, Silverlight也一如既往可以.

改页面属性:如修改页面标题, HtmlPage.Document.SetProperty(“title”, “new
title”);

操纵html元素:

HtmlElement elem =  HtmlPage.Document.GetElementByID(“btn”);
elem.SetAttribute(“value”, “haha”);
elem.GetAttribute(“value”);

elem.AttachEvent(“onclick”, delegate(object sender, HtmlEventArgs he){
                // …
            });

3.Javascript调用Silverlight方法

Javascript要惦记调用Silverlight,
Silverlight必须通过DOM提供给Javascript一个可操作的对象.

新建一个silverlight项目, 修改Page.xaml.cs如下:

using System;
using System.Windows;
using System.Windows.Browser;
using System.Windows.Controls;

namespace SilverlightProject1
{
    [Scriptable]     public partial class Page : Canvas
    {
        public void Page_Loaded(object o, EventArgs e)
        {
            // Required to initialize variables
            InitializeComponent();           

            WebApplication.Current.RegisterScriptableObject(“js”,
this);
           
        }

       [Scriptable]        public string CalledByJs(string name)
        {
            return “i’m silverlight, called by ” + name;
        }
    }
}

修改TestPage.html如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>
<html xmlns=”http://www.w3.org/1999/xhtml%22 >
<head>
    <title>Silverlight Project Test Page </title>
    <script type=”text/javascript”
src=”Silverlight.js”></script>
    <script type=”text/javascript”
src=”TestPage.html.js”></script>
    <style type=”text/css”>
        .silverlightHost { width: 640px; height: 480px; }
    </style>
    <script type=”text/javascript”>
        function callSL()
        {
            var control =
document.getElementById(“SilverlightControl”);
            var manager = control.Content.js;
            alert( manager.CalledByJs(‘js’) );
        }
    </script>
</head>

<body>
    <div id=”SilverlightControlHost” class=”silverlightHost” >
        <script type=”text/javascript”>
            createSilverlight();
        </script>
    </div>
    <input id=”btn” type=”button” value=”call silverlight method”
onclick=”callSL()” />

</body>
</html>

好像还不支持Silverlight方法返回一个苛类型,
不过还吓Silverlight内置了json的支持,
使用System.Windows.Browser.Serialization命名空间下JavaScriptSerializer序列化一下即便ok
了.

4.Silverlight调用Javascript方法

Silverlight无法直接调用javascript方法, 不了得运用事件,
在Silverlight里抛来事件, 在javascript响应该事件.

修改Page.xaml如下:

<Canvas x:Name=”parentCanvas”
        xmlns=”http://schemas.microsoft.com/client/2007%22
        xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml%22
        Loaded=”Page_Loaded”
       
x:Class=”SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll”
        Width=”640″
        Height=”480″
        Background=”White”
        >
  <TextBlock Text=”call js method”
MouseLeftButtonDown=”OnClick”/>

</Canvas>

修改Page.xaml.cs如下:

using System;
using System.Windows;
using System.Windows.Browser;
using System.Windows.Controls;
using System.Windows.Input;

namespace SilverlightProject1
{
    [Scriptable]     public partial class Page : Canvas
    {
        public void Page_Loaded(object o, EventArgs e)
        {
            // Required to initialize variables
            InitializeComponent();           

            WebApplication.Current.RegisterScriptableObject(“js”,
this);
          
        }

        protected void OnClick(object sender, MouseEventArgs e)
        {
            if (this.CallJs != null )
            {
                EventHandler temp = this.CallJs;
                temp(this, EventArgs.Empty);
            }
        }

       [Scriptable]
        public event EventHandler CallJs;
    }
}

改TestPage.html.js:在onLoad事件里添加了针对性Silverlight抛来的CallJs
事件之响应.

// JScript source code

//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight()
{
    Silverlight.createObjectEx({
        source: “Page.xaml”,
        parentElement:
document.getElementById(“SilverlightControlHost”),
        id: “SilverlightControl”,
        properties: {
            width: “100%”,
            height: “100%”,
            version: “1.1”,
            enableHtmlAccess: “true”
        },
        events: { onLoad : OnLoaded}     });
    // Give the keyboard focus to the Silverlight control by default
    document.body.onload = function() {
      var silverlightControl =
document.getElementById(‘SilverlightControl’);
      if (silverlightControl)
      {
        silverlightControl.focus();
      }
    }
}

function OnLoaded(sender, args)
{
    sender.Content.js.CallJs = calledBySL;
}

function calledBySL(sender, args)
{
    alert(“i’m js, called by silverlight”);
}

done!

本身尝试了以Silverlight事件里加了从定义的参数,
javascript这边好像接收不顶??不知底凡是呀原因.

总结:

Silverlight与Javascript的互操作的不二法门及Flex类似,
不了个人或爱Silverlight的方法, C#的语法简单清晰.

参考资料:

[Silverlight探秘]深深探讨Silverlight与Javascript的并行

Silverlight 访问html元素

连接了个单子,非要因此Silverlight
5来作一个色,之前根本没有点过这东西,为了工作,硬在头皮也要是达标了。摸索了一致夜间,大及整出部分档受到要的事物,以下作为初探记录:

Silverlight 5与Javascript的交谈方式

Silverlight
5属于客户端的物,客户端的东西以及劳动器端交流,第一时间想到了基于javascript的ajax这个万能胶,所以先由Silverlight
5与Javascript交互方式入手。

一、Silverlight 5发言,Javascript倾听

从Silverlight 5里向Javascript发送程序运行请求。
Silverlight 5端代码具体如下: 

HtmlPage.Window.Invoke(“Javascript函数方式”, “传值-Oyiboy”);

经过上述代码可以一直在Silverlight
5里运行Javascript的脚本代码,并发送必要之数据出来。

二、Javascript发言,Silverlight 5倾听

Javascript用ajax获取服务器端数据后发送给Silverlight
5,以达Silverlight 5与劳务器端的相作用。
Silverlight 5端代码具体如下:

//设置值
[ScriptableMember()]//这行是要,必须有夫javascript才会告到此方式
public void setVal(string D)
{
this.textView.Text = D;
}
//javascript主动要求返回回值
[ScriptableMember()]
public string returnVal()
{
return this.textView.Text;
}

Html代码调整:
内需以Silverlight
5插件的object代码内里添加以下参数设置句,以达到插件在加载后取siliverlight对象。

<param name=”onLoad” value=”siliverLoaded” />

Javascript代码具体如下:

//siliverlight对象
var siliverlightObj = null;
//上面那个HTML代码内设置的Silverlight 5 onLoad事件触发的函数
function siliverLoaded(sender, args) {
siliverlightObj = sender.getHost();
}

//以下代码中的.buttonSet和.buttonReu是两个带这些class的按钮,按钮就不详细写出来了
//这个是运行Silverlight 5内的setVal方法
$(".buttonSet").click(function () {
siliverlightObj.Content.Main.setVal("javascript传入值-Oyiboy");
})
//这个是运行Silverlight 5内的returnVal方法
$(".buttonReu").click(function () {
alert(siliverlightObj.Content.Main.returnVal());
});
// hovertree.com

 

以上几乎独艺术,灵活运用的生存多就完全解决了Silverlight
5与劳务器端之间的交流,好吧,虽然当时首的物的主题是Silverlight
5与Javascript,但说到底目的或者Silverlight
5与劳动器端的互动,反正ajax也非是啊新物,所以就算越了了。

感想:通过Silverlight
5的对象siliverlightObj.Content.Main这同颇窜东西来拘禁,siliverlightObj还会发更多之行了,具体还要逐步寻找了,如果下来需要动用的话,还可能会见起此的验证文章吧,或许。

补漏: 
关于siliverlightObj.Content.Main中的Main是指在Silverlight
中app.xaml的Application_Startup事件受到登记之拜访名称,具体代码如下:

private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = new MainPage();
System.Windows.Browser.HtmlPage.RegisterScriptableObject(“Main”,
this.RootVisual);
}

自打代码中唯独知晓,如果有多单xaml页的话,只要以此处登记不同的名目即使得引用不同xaml页内声明的Javascript方法了。 
巧整理代码时当APP.xaml发现就句代码才想起将这个为漏了,今天上回。

silverlight加密:http://keleyi.com/tool/md5.htm

转自:http://hovertree.com/h/bjaf/silverlight5.htm

silverlight数字时钟:
图片 1

http://roucheng.cnblogs.com/