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>
    <HEAD>
        <TITLE>Invoke Script Sample</TITLE>
        <SCRIPT>
            //无参数调用
            function alertNull(){
                alert("WebBrowser call!");
            }
            //有参数调用
            function callWithPar(name, address) {
                alert("Name is " + name + "; address is " + address);
            }
          
            //返回字符串
            function returnString() {
                return("This is a test.");
            }

            //返回对象
            function returnScriptObject() {
                return(new(MyObject));
            }

            function MyObject() {
                this.Data = "Data for my private object.";
            }
        </SCRIPT>
    </HEAD>

    <BODY>
        <DIV id="div1">
        </DIV>
    </BODY>
</HTML>

 

private void button2_Click(object sender, EventArgs e)
        {
            string name = "dai";
            string address = "123";
            if (webBrowser1.Document != null)
            {
                HtmlDocument doc = webBrowser1.Document;
                //无参调用
                doc.InvokeScript("alertNull");

                Object[] objArray = new Object[2];
                objArray[0] = (Object)name;
                objArray[1] = (Object)address;

                //有参调用
                doc.InvokeScript("callWithPar", objArray);

                //返回字符串
                String str = doc.InvokeScript("returnString").ToString();
                MessageBox.Show(str);
                //返回对象
                Object jscriptObj = doc.InvokeScript("returnScriptObject");
                MessageBox.Show(jscriptObj.ToString());
            }
        }

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

HtmlElement ele = webBrowser1.Document.CreateElement("script");
ele.SetAttribute("type", "text/javascript");
ele.SetAttribute("text", "alert('new script')");
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>
    <HEAD>
        <TITLE>Invoke C# Sample</TITLE>
    </HEAD>

    <BODY>
        <DIV id="div1">
        </DIV>
        <SCRIPT>

            window.external.CallShow();
            //传参数
            window.external.ShowSomething("Hello");
            //返回值
            var msg = window.external.returnSomething("Hello");
            alert(msg);
           
            //直接获取变量
            alert(window.external.a);
        </SCRIPT>
    </BODY>

</HTML>

 

[System.Runtime.InteropServices.ComVisible(true)]
        public class JSObject
        {
            // 无参数,无返回值
            public void CallShow()
            {
                MessageBox.Show("Called from JS");
            }

            //无返回值,有参数
            public void ShowSomething(String msg)
            {
                MessageBox.Show("Called from " + msg);
            }

            //有返回值,有参数
            public string returnSomething(String msg)
            {
                msg += "From C#";
                return msg;
            }
            //直接获取变量
            public string a = "A";

        }


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

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

以上!


 

 


 

转载于:https://www.cnblogs.com/AndyDai/p/5135296.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值