一步一步学Silverlight 2系列（21）：如何在Silverlight中调用JavaScriptjavascript

一步一步学silverlight 2系列(21):如何在silverlight中调用javascript

概述

silverlight 2 beta 1版本发布了,无论从runtime还是tools都给我们带来了很多的惊喜,如支持框架语言visual basic, visual c#, ironruby, ironpython,对json、web service、wcf以及sockets的支持等一系列新的特性。《一步一步学silverlight 2系列》文章将从silverlight 2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入silverlight 2开发。

silverlight中内置了对于html、客户端脚本等的支持。很多情况下,我们编写的web应用程序中用了一些javascript或者ajax框架,我们希望能够在silverlight调用某些脚本方法,或者说在silverlight中触发某个脚本的执行,这时就需要用到在silverlight中调用javascript,本文将简单介绍这一内容。

使用getproperty获取脚本对象

先来看一个简单的例子,在silverlight测试页面中放入一个div用作显示信息:

div id="result">div>

编写一段简单的javascript代码:

script type="text/javascript">

function hello(message)

{

var resultspan = $get("result");

resultspan.innertext = "hello " + message;

}

script>

再编写一个简单的输入信息界面:

stackpanel background="#cdfcae" orientation="vertical">

stackpanel height="40">

textblock text="calling browser script from silverlight"

foreground="red">textblock>

stackpanel>

stackpanel orientation="horizontal">

textbox x:name="input" width="340" height="40" margin="20 0 20 0">textbox>

button x:name="submit" width="120" height="40" background="red"

content="调用" fontsize="20" foreground="red" click="submit_click">button>

stackpanel>

实现对脚本的调用:

private void submit_click(object sender, routedeventargs e)

{

scriptobject hello = htmlpage.window.getproperty("hello") as scriptobject;

hello.invokeself(this.input.text);

}

scriptobject提供了任何客户端脚本的封装,不仅仅是javascript,使用其他的ajax框架也可以,如jquery等。然后调用invokeself()方法,传入参数,这里scriptobject总共提供了两个方法,invoke和invokeself,如果我们只调用脚本对象的自身,就可以使用invokeself,如果脚本对象中还有其它的函数等,可以使用invoke传入名称进行调用,两个方法的定义如下:

[securitysafecritical]

public virtual object invoke(string name, params object[] args);

[securitysafecritical]

public virtual object invokeself(params object[] args);

运行上面的示例:

输入terrylee后点击调用,可以看到确实调用了客户端脚本:

使用createinstance创建脚本对象

除了使用上面所说的使用htmlpage.window.getproperty方法获取脚本对象之外,还有一种替代方法,即使用htmlpage.window属性的createinstance方法。还是使用上面的示例,我们在测试页中加入如下一段脚本,使用prototype为myhello添加了显示的功能:

script type="text/javascript">

myhello = function(message)

{

this.message = message;

}

myhello.prototype.display = function()

{

var resultspan = $get("result");

resultspan.innertext = "hello " + this.message;

}

script>

使用htmlpage.window.createinstance创建脚本对象

private void submit_click(object sender, routedeventargs e)

{

scriptobject script = htmlpage.window.createinstance("myhello",this.input.text);

object result = script.invoke("display");

}

运行后的效果跟上面的示例是一样的,如:

输入文本信息后:

使用htmlpage.window.eval()

最后还有一种机制,就是使用htmlpage.window.eval()方法,只要我们给该方法传入一段字符串,它都会作为javascript来执行。做一个简单的测试,我们再修改一下上面的示例代码:

private void submit_click(object sender, routedeventargs e)

{

htmlpage.window.eval(this.input.text);

}

运行后我们在文本框中输入一段脚本alert('terrylee');,效果如下所示:

既然htmlpage.window.eval()可以执行一段脚本,并且将执行的结果以对象形式返回,我们可以使用它来获取dom元素。如下面这段代码:

private void submit_click(object sender, routedeventargs e)

{

htmlelement result = htmlpage.window.eval("document.getelementbyid('result')") as htmlelement;

string message = result.getattribute("innerhtml");

htmlpage.window.alert(message);

}

运行后效果如下,获取的result确实就是我们定义的div。

对ajax框架的支持

前面说过,scriptobject不仅仅是对javascript的封装,也支持其它的ajax框架,现在我们用jquery来测试一下,编写一小段代码:

script type="text/javascript">

function myhello(message)

{

$("#result").text("hello " + message);

}

script>

调用脚本

private void submit_click(object sender, routedeventargs e)

{

scriptobject script = htmlpage.window.getproperty("myhello") as scriptobject;

script.invokeself(this.input.text);

}

运行后的结果与前面的示例是一样的:

结束语

本文介绍了在silverlight中调用javascript的几种方法,下一篇我将介绍如何在javascript中调用silverlight。

作者:terrylee

出处:http://terrylee.cnblogs.com

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

标签: silverlight

绿色通道:好文要顶关注我收藏该文与我联系

posted @ 2008-03-12 18:24 terrylee 阅读(18052) 评论(51)编辑收藏

发表评论

2261177

回复引用

#1楼 2008-03-12 20:00 jejwe[未注册用户]

js能没操作sl

回复引用查看

#2楼 2008-03-12 20:04 菜菜灰

哈哈,等了一天终于等到了,另外问下怎么制作动画。

回复引用查看

#3楼[楼主] 2008-03-12 20:18 terrylee

@jejwe

什么意思?:)

没看懂

回复引用查看

#4楼[楼主] 2008-03-12 20:19 terrylee

@菜菜灰

制作动画,用expression blend吧:)

回复引用查看

#5楼 2008-03-12 20:21 菜菜灰

expression blend 也没有看明白怎么制作动画

回复引用查看

#6楼[楼主] 2008-03-12 20:23 terrylee

@菜菜灰

呵呵,那这就是工具使用的问题了

回复引用

#7楼 2008-03-12 20:38 jejwe[未注册用户]

--引用--------------------------------------------------

terrylee: @jejwe

什么意思?:)

没看懂

--------------------------------------------------------

我是想问,能不能通过js直接操作sl,比如触发一个sl的按纽事件

回复引用查看

#8楼[楼主] 2008-03-12 20:42 terrylee

@jejwe

太让我伤心了,呵呵,本文的最后一句话:

“下一篇我将介绍如何在javascript中调用silverlight”

回复引用查看

#9楼 2008-03-12 21:39 王德水

学了一段时间的 silverlight1.0现在看来是白学了,silverlight2.0真是方便,最重要的是有智能提示,再次支持terrylee给我们带来深入浅出的文章,幸苦了

回复引用查看

#10楼[楼主] 2008-03-12 21:45 terrylee

@王德水

呵呵,对silverlight中的一些东西的理解还是有用的,呵呵,感谢你的支持:)

回复引用查看

#11楼 2008-03-13 09:25 clark zheng

great work!

回复引用查看

#12楼 2008-03-13 09:28 tristan(guozhijian)

不错,比之1.1 alpha方便多了

不知道 javascript调后台cs代码怎么样

回复引用查看

#13楼 2008-03-13 10:19 小庄

我感觉既然sl这么牛,要是用来做系统的话就没有必要用那个js了吧,用户登录以后就sl全屏模式,再来个sl的多窗口管理,都是异步模式,自然就多窗口多任务了,就像个系统的样子了;就是想问一下sl怎么管理多窗口,而且窗口中的功能操作逻辑和界面代码可以从服务器自动下载并运行?

回复引用查看

#14楼 2008-03-13 10:23 小庄

@tristan(guozhijian)

您说的cs代码指的是sl里的cs代码还是服务上的?要是sl里的当然可以,服务器端运行的cs代码应该实现不了。sl只是一个客户端技术。

回复引用查看

#15楼[楼主] 2008-03-13 13:00 terrylee

@clark zheng

谢谢:)

回复引用查看

#16楼[楼主] 2008-03-13 13:00 terrylee

@tristan(guozhijian)

您说的是在js中调用silverlight中的cs代码吧?今天我将会发布这部分内容:)

回复引用查看

#17楼[楼主] 2008-03-13 13:02 terrylee

@小庄

调用js有时候还是有用的

多窗口管理不太了解。。。

回复引用查看

#18楼 2008-03-13 13:02 tristan(guozhijian)

@terrylee

嗯,是的 :)

回复引用查看

#19楼[楼主] 2008-03-13 13:04 terrylee

@tristan(guozhijian)

晚上就发布,其实很简单,跟在asp.net ajax调用webmethod一样,呵呵,也是通过特性暴露一些方法:)

回复引用查看

#20楼 2008-03-13 17:13 scott xu(南方小鬼)

添加[scriptable]标记的吧

回复引用查看

#21楼 2008-03-13 17:17 scott xu(南方小鬼)

webapplication.current.registerscriptableobject("pipelinecontrol", this);

回复引用查看

#22楼[楼主] 2008-03-13 17:23 terrylee

@scott xu(南方小鬼)

对应于类型和成员分别有两个特性:scriptabletype和scriptablemember

回复引用

#23楼 2008-07-14 08:14 student_sun[未注册用户]

不错的文章!一口气看完。

回复引用

#24楼 2008-08-18 15:09 joe zhang[未注册用户]

不错的文章,期待下一章。

回复引用查看

#25楼[楼主] 2008-08-20 10:21 terrylee

@student_sun

回复引用查看

#26楼[楼主] 2008-08-20 10:21 terrylee

@joe zhang

下一篇好像早就有了^_^

回复引用查看

#27楼 2008-10-13 12:17 threeg

innertext好像不行啊!!我改成innerhtml还可以!!

回复引用查看

#28楼 2008-10-15 12:10 threeg

原来是浏览器的问题!在ie上可以,

在firefox 上都不行!!

回复引用查看

#29楼 2008-11-18 17:27 laurel's blog

htmlpage.window.getproperty("hello")

我这句取到的是空,function是写在aspx页吧.

不知道哪错了,

回复引用查看

#30楼[楼主] 2008-11-19 09:30 terrylee

@laurel's blog

是的,写在aspx页面中

回复引用

#31楼 2008-12-02 16:44 z-suker[未注册用户]

楼主是我的偶像...膜拜啊~~~~~~对楼主的景仰犹如滔滔江水连绵不绝啊~哈哈....

回复引用查看

#32楼[楼主] 2008-12-08 10:28 terrylee

@z-suker

呵呵,太客气了:)

回复引用查看

#33楼 2009-02-05 12:21 emanlee

源代码(测试环境:silverlight 2.0 , vs2008 sp1, .net 3.5 sp1 )

http://files.cnblogs.com/emanlee/terrylee.silverlightdemo.javascript_1.rar

http://files.cnblogs.com/emanlee/terrylee.silverlightdemo.javascript_2.rar

http://files.cnblogs.com/emanlee/terrylee.silverlightdemo.javascript_3.rar

http://files.cnblogs.com/emanlee/terrylee.silverlightdemo.javascript_4.rar

回复引用

#34楼 2009-02-24 15:59 aerolk[未注册用户]

火狐下无效怎么解决

回复引用

#35楼 2009-03-19 21:45 wolfalcon[未注册用户]

李老师

javascript的代码是在哪个文件里写的啊?.xaml?.html?.aspx?还是哪个地方?如果单独在工程中add一个 .js文件那么如何调用这个.js文件中的函数呢?

迷惑中.......

回复引用

#36楼 2009-03-19 22:17 wolfalcon[未注册用户]

再问个问题!李老师:

能不能给写一个在silverlight中动态生成一个表格行的代码

就是有一个按钮点一下表格就自动生成一行表格的每个cell中内嵌一些不同的控件比方botton textbox之类的简单给写一个就行

万分感谢

回复引用

#37楼 2009-04-30 23:44 破浪

跟着利老师一步一步的学习,发现silverlight真的很强大。

回复引用

#38楼 2009-05-05 17:31 lovesilverlight[未注册用户]

调用这个函数:

function myhello(message)

{

$("#result").text("hello " + message);

}

老是有问题,不知道为什么。把它修改成普通javascript函数就可以正常,why?

回复引用查看

#39楼 2009-05-20 15:05 xihongshibeibei

@lovesilverlight

把jquery引用进去就可以了

回复引用

#40楼 2009-08-20 10:19 qingtian1220[未注册用户]

为什么我调用失败(第一中调用方法)

,没什么反应?

回复引用查看

#41楼 2009-10-29 21:17 bob.liu

从头看到尾,下一章在哪?

回复引用查看

#42楼 2010-05-30 22:09 冰河

scriptobject hello = htmlpage.window.getproperty("hello") as scriptobject;

hello.invokeself(this.input.text);

silverlight4中,这里抛出异常:invokeself失败。

一直找不到原因,请高手指教!谢谢

回复引用查看

#43楼 2010-10-15 14:58 heiyumars

雁过留声,人过留名,感谢lz.

回复引用查看

#44楼 2010-12-08 13:28 human_hero

@冰河

我也遇到了一样的问题,

在页面里加个

就好了。

回复引用查看

#45楼 2011-12-04 20:00 lyki

引用@冰河

我也遇到了一样的问题,

在页面里加个

就好了。

我添加了不管用……

注册用户登录后才能发表评论,请登录或注册,返回博客园首页。

首页博问闪存新闻园子招聘知识库

一步一步学Silverlight 2系列（21）：如何在Silverlight中调用JavaScriptjavascript相关推荐

算法之路，带你轻松学废算法系列之字符串匹配（中）
文章目录字符串匹配中前言 KMP算法 KMP算法的基本原理失效函数计算方法问题解答 KMP 算法复杂度分析小结 Trie树什么是Trie树如何实现一棵 Trie 树? Trie树的构造 ...
MATLAB从入门到精通系列之如何在MATLAB中导入excel单sheet页及多sheet页表格
前言一个excel表格中可能有一个Sheet或多个Sheet,虽然在MATLAB中只需要加些代码即可轻松实现,但是为了帮助各位小伙伴更容易理解. 因此,分为两部分讲解:1)excel表格中只有一个S ...
mysql显示表已存在_「Docker系列」如何在Docker中部署MySQL数据库？
Docker为部署和测试应用程序和数据库提供了许多优势,这些应用程序和数据库是应用程序不可或缺的一部分,因此很值得学习如何在Docker容器中部署和运行数据库. 本文中,我们会重点关注如下重点: 为M ...
Java系列：如何在Eclipse中安装Memory Analyzer插件
一.找到eclipse的插件安装对话框: help->install new software ->work with 二.输入Memory Analyzer的安装路径具体可以到http ...
一步一步学Silverlight 2系列（21）：如何在Silverlight中调用JavaScript
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
一步一步学Silverlight 2系列（22）：在Silverlight中如何用JavaScript调用.NET代码_转载...
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
一步一步学Silverlight 2系列（22）：在Silverlight中如何用JavaScript调用.NET代码
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
Web服务初探：用Demo学Web服务系列（7）——XML的相关知识
我们前面的<Web服务初探:用Demo学Web服务系列>六个随笔中已经探讨完了C/S程序对Web Services的调用,大家感觉难吗?下面我们就有关的Web Services的原理讲解一 ...
Net程序员学用Oracle系列(1)：导航目录
原文:https://www.cnblogs.com/hanzongze/p/oracle-catalog.html .Net程序员学用Oracle系列(1):导航目录 .Net程序员学用Oracle ...

一步一步学Silverlight 2系列（21）：如何在Silverlight中调用JavaScriptjavascript

一步一步学Silverlight 2系列（21）：如何在Silverlight中调用JavaScriptjavascript相关推荐

最新文章

热门文章