亚洲必赢手机自学silverlight 5.0Silverlight与Html/JavaScript互操作。

by admin on 2018年10月10日

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图