Silverlight如何与JS相互调用

作者: 策略游戏排行  发布:2019-09-01

那是贰个silverlight游戏:

1.sl调用js

转自:

这几天写了Flex和JavaScript互操作, 本篇介绍Silverlight和Html/Javascript的互操作性.当然Silverlight可以动用各类托管语言, 我那边使用C#Silverlight如何与JS相互调用。Silverlight如何与JS相互调用。.

摘要:

先介绍一下System.Windows.Browser命名空间下的多少个类, 接着介绍Silverlight怎么样垄断Html成分, 最终介绍如何从Javascript调用Silverlight的办法, 以及Silverlight调用Javascript方法.

1.System.Windows.Browser

Silverlight 提供了一组对象来描述Html文档对象模型(DOM), 富含HtmlPage, HtmlDocument, HemlElement, HtmlElementCollection, 等等. 大家得以经过这么些目的从Silverlight访谈Html页面的开始和结果, 如获取某些Html成分, 导航到新的U昂CoraL等.(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");

Silverlight如何与JS相互调用。Silverlight如何与JS相互调用。操纵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;
Silverlight如何与JS相互调用。using System.Windows.Controls;

Silverlight如何与JS相互调用。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)
Silverlight如何与JS相互调用。        {
            return "i'm silverlight, called by " name;
Silverlight如何与JS相互调用。        }
    }
}

修改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 5来作二个品类,此前一直没接触过那东西,为了职业,硬着头皮也要上了。探求了一晚间,大至整理出部分项目中须求的东西,以下作为初探记录:

比如说大家在页面中定义叁个js函数:

Silverlight 5与Javascript的交谈方式

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

Silverlight 5属于顾客端的东西,顾客端的事物与劳动器端调换,第偶尔间想到了基于javascript的ajax这些万能胶,所以先从Silverlight 5与Javascript交互方式动手。

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

一、Silverlight 5发言,Javascript倾听

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

从Silverlight 5里向Javascript发送程序运维央浼。
Silverlight 5端代码具体如下: 

或者

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

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

因此以上代码能够直接在Silverlight 5里运转Javascript的台本代码,并发送须求的数据出来。

运维的意义一模二样,可是提议用Invoke方法,原因是:

二、Javascript发言,Silverlight 5倾听

CreateInstance是HtmlWindow中定义的艺术,而HtmlWindow承袭自HtmlObject,再前进找HtmlObject又继续ScriptObject,最后调用的依然ScriptObject中的Invoke方法,所以用CreateInstance绕来绕去,最后依旧绕到了Invoke上,还不比一步到位直接Invoke更飞快。

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

2.sl更动dom元素属性

//设置值
[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" />

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

sl中一模二样也可以有三种办法调用:

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

HtmlPage.Document.GetElementById("txtTarget").SetAttribute("value", "Silverlight");
HtmlPage.Document.GetElementById("txtTarget").SetProperty("value", "Silverlight");

Javascript代码具体如下:

作用完全同样,同样建议用SetProperty方法,理由同上

//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

3.sl为dom元素附加事件

 

HtmlPage.Document.GetElementById("txtTarget").AttachEvent("focus", new EventHandler(AttachJsMethod));

本文由bg游戏资讯发布于策略游戏排行,转载请注明出处:Silverlight如何与JS相互调用

关键词: .NET技术 Silverlight .NET C# Silve

上一篇:abapGit分支策略
下一篇:没有了