zoukankan      html  css  js  c++  java

  • 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.             //返回字符串  
    15.             function returnString() {  
    16.                 return("This is a test.");  
    17.             }  
    18.   
    19.             //返回对象  
    20.             function returnScriptObject() {  
    21.                 return(new(MyObject));  
    22.             }  
    23.   
    24.             function MyObject() {  
    25.                 this.Data = "Data for my private object.";  
    26.             }  
    27.         </SCRIPT>  
    28.     </HEAD>  
    29.   
    30.     <BODY>  
    31.         <DIV id="div1">  
    32.         </DIV>  
    33.     </BODY>  
    34. </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.   
    11.                 Object[] objArray = new Object[2];  
    12.                 objArray[0] = (Object)name;  
    13.                 objArray[1] = (Object)address;  
    14.   
    15.                 //有参调用  
    16.                 doc.InvokeScript("callWithPar", objArray);  
    17.   
    18.                 //返回字符串  
    19.                 String str = doc.InvokeScript("returnString").ToString();  
    20.                 MessageBox.Show(str);  
    21.                 //返回对象  
    22.                 Object jscriptObj = doc.InvokeScript("returnScriptObject");  
    23.                 MessageBox.Show(jscriptObj.ToString());  
    24.             }  
    25.         }  

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

    [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.   
    6.     <BODY>  
    7.         <DIV id="div1">  
    8.         </DIV>  
    9.         <SCRIPT>  
    10.   
    11.             window.external.CallShow();  
    12.             //传参数  
    13.             window.external.ShowSomething("Hello");  
    14.             //返回值  
    15.             var msg = window.external.returnSomething("Hello");  
    16.             alert(msg);  
    17.              
    18.             //直接获取变量  
    19.             alert(window.external.a);  
    20.         </SCRIPT>  
    21.     </BODY>  
    22.   
    23. </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.             //无返回值，有参数  
    11.             public void ShowSomething(String msg)  
    12.             {  
    13.                 MessageBox.Show("Called from " + msg);  
    14.             }  
    15.   
    16.             //有返回值，有参数  
    17.             public string returnSomething(String msg)  
    18.             {  
    19.                 msg += "From C#";  
    20.                 return msg;  
    21.             }  
    22.             //直接获取变量  
    23.             public string a = "A";  
    24.   
    25.         }  


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

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

    以上！
  • 相关阅读:
    反射
    Ajax
    JSP(二)
    JSP
    Servlet(三)
    Servlet(二)
    Servlet
    idea的Tomcat的配置
    使用Idea创建Maven构造的Web工程
    Maven的下载、安装与环境配置
  • 原文地址：https://www.cnblogs.com/soundcode/p/10064621.html
Copyright © 2011-2022 走看看