当前位置: 棋牌电玩游戏平台 > 最新电玩 > 正文

Silverlight如何与JS相互调用

时间:2019-09-02 16:57来源:最新电玩
这是一个silverlight游戏: 1.sl调用js 转自: 前段时间写了Flex和JavaScript互操作,本篇介绍Silverlight和Html/Javascript的互操作性.当然Silverlight可以使用多种托管语言,我这里使用C#. 摘要: 先介绍

这是一个silverlight游戏:

1.sl调用js

转自:

前段时间写了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" ">
<html xmlns=" >
<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="
        xmlns:x="
        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显示的值。其方法如下。

接了个单子,非要用Silverlight 5来作一个项目,之前从来没接触过这东西,为了工作,硬着头皮也要上了。摸索了一晚上,大至整理出一些项目中需要的东西,以下作为初探记录:

比如我们在页面中定义一个js函数:

1、首先在Silverlight中UserControl中编写一个js可以访问的方法。注意:此方法要用ScriptableMember特性。 

Silverlight 5与Javascript的交谈方式

<script type="text/javascript">
        function fnTest(msg) {
            alert('fnTest:' msg);
        }
    </script>

        //编写js访问silverLight 的方法,selectDate为参数
        [ScriptableMember()]
        public void GetTrendChart(string selectDate)
        {
            DateTime tempDate = new DateTime();
            if (string.IsNullOrEmpty(selectDate) || !DateTime.TryParse(selectDate, out tempDate))
            {
                ShowInfo("日期有误");
                return;
            }
               //取得资料,改变silverLight显示值,此处省略CreateTrendChart()的代码。
            CreateTrendChart(selectDate);
        }

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

sl中可以有二种调用方式:

2、在App.xaml中注册此方法。

一、Silverlight 5发言,Javascript倾听

HtmlPage.Window.CreateInstance("fnTest", "CreateInstance");

        //在App.xaml中注册
        private void Application_Startup(object sender, StartupEventArgs e)
        {
                //调用UserControl
                this.RootVisual = new Trend();
                //注册js访问的方法
                System.Windows.Browser.HtmlPage.RegisterScriptableObject("TrendMethod", this**
.RootVisual);**
        }

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

或者

 3.在Aspx页面的调用Silverlight中增加onload事件

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

HtmlPage.Window.Invoke("fnTest", "Invoke");

            <%--调用siliverlight--%>
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
                width="100%" height="100%">
                <param name="source" value="../ClientBin/Iaddtech.Environmental.Web.Silverlight.xap" />
                <param name="onError" value="onSilverlightError" />
                <param name="background" value="white" />
                <param name="minRuntimeVersion" value="3.0.40818.0" />
                <%--增加Load事件--%>
                <param name="onLoad" value="silverLoaded" />

                <param name="autoUpgrade" value="true" />
                <param name="Windowless" value="true" />
                <a href="" style="text-decoration: none">
                    <img src="" alt="Get Microsoft Silverlight"
                        style="border-style: none" />
                </a>
            </object>

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

运行的效果完全相同,但是建议用Invoke方法,原因是:

4、编写onload事件。通过onload事件得到siliverlight对象。

二、Javascript发言,Silverlight 5倾听

CreateInstance是HtmlWindow中定义的方法,而HtmlWindow继承自HtmlObject,再向上找HtmlObject又继承ScriptObject,最终调用的还是ScriptObject中的Invoke方法,所以用CreateInstance绕来绕去,最终还是绕到了Invoke上,还不如一步到位直接Invoke更高效。

    <script type="text/javascript">
        var silverlightObj = null;
        function silverLoaded(sender, args) {
            silverlightObj **=** sender.getHost();     //get Siliverlight Object
        }
    </script>

Javascript使用ajax获取服务器端数据后发送给Silverlight 5,以达到Silverlight 5与服务器端的交互效果。
Silverlight 5端代码具体如下:

2.sl修改dom元素属性

 5、在Aspx页面上增加一个input。通过此input改变Silverlight显示值。此input的onclick方法为GetTrendData.

//设置值
[ScriptableMember()]//这行是关键,必须有这个javascript才能请求到这个方法
public void setVal(string D)
{
this.textView.Text = D;
}
//javascript主动要求返回值
[ScriptableMember()]
public string returnVal()
{
return this.textView.Text;
}

比如页面中有一个文本框: <input type="text" id="txtTarget" name="txtTarget" />

        <div class="Query_button">
            <input type="image" value="getDate" onclick="GetTrendData(); return false;" src="../Resourcessee_button.jpg" />
        </div>

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

sl中同样也有二种方法调用:

 6、在js中添加input的click事件。 通过Click事件调用Silverlight中方法

编辑:最新电玩 本文来源:Silverlight如何与JS相互调用

关键词: .NET技术 Silverlight C# .net si