专栏首页hbbliyongWebBrowser(IE) 与 JS 相互调用

WebBrowser(IE) 与 JS 相互调用

在开发中我们经常将WebBrowser控件嵌入Winform 程序来浏览网页,既然是网页那么少不了JS。下面就让我们来说说他们两之间的相互调用。

在C#封装的浏览器内核中,Chromium 内核封装有Xilium.Cefglue、Cefsharp,Webkit 内核封装 Webkit.Net 、OpenWebKitSharp等。

但是说到和JS的调用,不得不说还是IE 的WebBrowser 最为简单方便。至于IE 为啥方便而其他的不方便,以后我会写文章分析。

下面我们还是先看看WebBrowser怎么和JS交互把:

WebBrowser 执行JS 代码

如果脚本已经存在于网页中,我们可以使用 InvokeScript 方法

public object InvokeScript(string scriptName)
public object InvokeScript(string scriptName,object[] args)

下面是一个简单例子:

[html] view plain copy

  1. <HTML>  
  2. <HEAD>  
  3. <TITLE>Invoke Script Sample</TITLE>  
  4. <SCRIPT>  
  5.             //无参数调用  
  6.             function alertNull(){  
  7.                 alert("WebBrowser call!");  
  8.             }  
  9.             //有参数调用  
  10.             function callWithPar(name, address) {  
  11.                 alert("Name is " + name + "; address is " + address);  
  12.             }  
  13.             //返回字符串  
  14.             function returnString() {  
  15.                 return("This is a test.");  
  16.             }  
  17.             //返回对象  
  18.             function returnScriptObject() {  
  19.                 return(new(MyObject));  
  20.             }  
  21.             function MyObject() {  
  22. this.Data = "Data for my private object.";  
  23.             }  
  24. </SCRIPT>  
  25. </HEAD>  
  26. <BODY>  
  27. <DIV id="div1">  
  28. </DIV>  
  29. </BODY>  
  30. </HTML>  

[csharp] view plain copy

  1. private void button2_Click(object sender, EventArgs e)  
  2.         {  
  3. string name = "dai";  
  4. string address = "123";  
  5. if (webBrowser1.Document != null)  
  6.             {  
  7.                 HtmlDocument doc = webBrowser1.Document;  
  8. //无参调用  
  9.                 doc.InvokeScript("alertNull");  
  10.                 Object[] objArray = new Object[2];  
  11.                 objArray[0] = (Object)name;  
  12.                 objArray[1] = (Object)address;  
  13. //有参调用  
  14.                 doc.InvokeScript("callWithPar", objArray);  
  15. //返回字符串  
  16.                 String str = doc.InvokeScript("returnString").ToString();  
  17.                 MessageBox.Show(str);  
  18. //返回对象  
  19.                 Object jscriptObj = doc.InvokeScript("returnScriptObject");  
  20.                 MessageBox.Show(jscriptObj.ToString());  
  21.             }  
  22.         }  

如果网页中不存在目标脚本,我们也可以创建脚本再执行。

[csharp] view plain copy

  1. HtmlElement ele = webBrowser1.Document.CreateElement("script");  
  2. ele.SetAttribute("type", "text/javascript");  
  3. ele.SetAttribute("text", "alert('new script')");  
  4. webBrowser1.Document.Body.AppendChild(ele);  

相当于更改Html 的DOM结构,在<Body>标签后添加<Script>标签,程序加载最后会执行text 中的JS代码。

JS 调用 C# 方法

接下来,我们来说说今天的重点,在JS中怎么调用C# 提供的方法。

public object ObjectForScripting {
	get;
	[SecurityCriticalAttribute]
	set;
}

public 类的实例的 Object,由主机应用程序实现且可由寄宿文档的脚本访问。

有了这个方法,调用C#方法就很简单,只需要在C#中声明一个C#对象,然后再设置 this.webBrowser1.ObjectForScripting = new JSObject();  就OK了。

记得要在JSObject 类上面声明 [System.Runtime.InteropServices.ComVisible(true)] 才能使对象可见。

设置完了之后,就可以在JS 中使用Window.external.function();调用JSObject()的function() 方法了。

下面是一个例子:

[html] view plain copy

  1. <HTML>  
  2. <HEAD>  
  3. <TITLE>Invoke C# Sample</TITLE>  
  4. </HEAD>  
  5. <BODY>  
  6. <DIV id="div1">  
  7. </DIV>  
  8. <SCRIPT>  
  9.             window.external.CallShow();  
  10.             //传参数  
  11.             window.external.ShowSomething("Hello");  
  12.             //返回值  
  13.             var msg = window.external.returnSomething("Hello");  
  14.             alert(msg);  
  15.             //直接获取变量  
  16.             alert(window.external.a);  
  17. </SCRIPT>  
  18. </BODY>  
  19. </HTML>  

[csharp] view plain copy

  1. [System.Runtime.InteropServices.ComVisible(true)]  
  2. public class JSObject  
  3.         {  
  4. // 无参数,无返回值  
  5. public void CallShow()  
  6.             {  
  7.                 MessageBox.Show("Called from JS");  
  8.             }  
  9. //无返回值,有参数  
  10. public void ShowSomething(String msg)  
  11.             {  
  12.                 MessageBox.Show("Called from " + msg);  
  13.             }  
  14. //有返回值,有参数  
  15. public string returnSomething(String msg)  
  16.             {  
  17.                 msg += "From C#";  
  18. return msg;  
  19.             }  
  20. //直接获取变量  
  21. public string a = "A";  
  22.         }  

简单的传值就是这样实现的,但是对于复杂对象传递,涉及到JS对象和C#对象转换,并不是很方便,能用字符串的还是用字符串吧。

用JSON传递是个不错的选择,C#和JS中都有JSON转换工具,可以试试。

以上!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 调试小技巧

    ‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入...

    hbbliyong
  • socket 通信 多线程调用窗体(委托)的几个知识点,记录在案,以备查阅

    1.socket 通信传输汉字的方法:Encoding.GetEncoding("GB2312").GetString(Receivebyte) 发送接收都这样...

    hbbliyong
  • C#动态调用泛型类、泛型方法

          主程序加载另一个程序集,将其中的所有类取出,然后对这些类分别调用泛型类或泛型方法。控制台程序解决方案如下:

    hbbliyong
  • 《JavaScript高级程序设计》读书笔记

    script 脚本中不要嵌入出现"" 字符串,会被错误识别为结束标签。正确写法是:"<\/script>"。

    心谭博客
  • JavaScript设计模式--享元模式

    享元(flyweight)模式是一种用于性能优化的模式,核心是运用共享技术来有效支持大量细刻度的对象。 在JavaScript中,浏览器特别是移动端的浏览器...

    奋飛
  • 美团二面,感觉要凉

    面试官那边有点吵,而且信号不大好,电话挂了好几次,整个都听不太清,不过我水平也有点瞎。

    牛客网
  • 微信小程序开发笔记

      因为前段时间一直在做关于微信小程序方面的项目,作为一名后端的攻城狮而言做一些简单的前端页面数据操作和管理还是比较容易快上手的,当然前提是要理解微信小程序的基...

    追逐时光
  • iOS开发 MVVM+RAC 的使用Demo效果ReactiveCocoa简介Demo分析代码Demo地址

    好长一段时间没有敲简书了! 主要是因为一直在跑面试。 终于还是在上海入职了! 由于项目原因最终还是入了MVVM+RAC的坑

    gwk_iOS
  • 云开发小程序博客系统

    个人认为,博客就两种:一是随笔,记录自己的成长历程,二是有目的的发文,例如搬运各种网赚文,我想大部分朋友做博客的初衷都是有一块自己的心灵净土,于是催生了wxap...

    许坏
  • DevOps 漫谈:基于OpenCensus构建分布式跟踪系统

    随着互联网技术的高速发展,以往单应用的服务架构已经很难处理如山洪般增长的信息数据,随着云计算技术的大规模应用,以微服务、RESTful 为代表的各种软件架构广泛...

    RiboseYim

扫码关注云+社区

领取腾讯云代金券