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

立是一个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/

admin

网站地图xml地图