WebBrowser（IE） 与 JS 相互调用

2022-11-17 23:07:12

在开发中我们经常将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)

下面是一个简单例子：

  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>
  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. }

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

  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() 方法了。

下面是一个例子：

  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>
  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转换工具，可以试试。

以上！

上一篇：eclipse创建一个文件夹


下一篇：ACM——数的计数