WebBrowser上的网页与Winform本身交互

本文旨在演示WebBrowser控件上的代码（Javascript、Html Dom）与Winform控件本身的交互，实现在WebBrowser的C/S程序中调用其网页上的Javascript函数，甚至反过来在网页的 Javascript代码中调用C/S程序中的方法。

以下示例点到为止，比如“B/S Dom对象的事件”示例中，除了用onchange/onpropertychange之外，其他任何支持的html事件均能使用，如onclick、 onkeydown等等。 例子中没有详细列出可以应用的方式和使用范围，但我们加以思考，触类旁通，可以实现很多很多功能的。

C# 中调用 网页上的 Javascript 函数

//tbPara1 是C/S控件
webBrowser1.Document.InvokeScript("funJS", new object[] { tbPara1.Text });

B/S调用C/S方法

实际上，这个实现方式并不是“调用”，而仅仅是通过“响应”进行回调。

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    webBrowser1.Document.GetElementById("funCSharp").Click += new HtmlElementEventHandler(funCSharp_Click);

}

void funCSharp_Click(object sender, HtmlElementEventArgs e)
{
    string funCSharp_para = webBrowser1.Document.GetElementById("funCSharp_para").GetAttribute("value");
    MessageBox.Show("第二步：C#方法被调用\n\nfunCSharp_para = " + funCSharp_para, "C#方法被触发,C/S对话框");
}

B/S Dom对象的事件

这个实现过程其本质与上例相同。除了用onchange/onpropertychange之外，其他任何支持的html事件均能使用，如onclick、onkeydown等等；除了 textarea 之外，其他Dom对象也同样适用，本例中点到为止。

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    //使用onchange也可以，只不过相比onpropertychange而言，onchange只能在文本框
    //失去焦点后方能触发，这一点完全相同于Html标签指定的事件
    webBrowser1.Document
        .GetElementById("onchangingTestArea")
        .AttachEventHandler("onpropertychange", new EventHandler(textbox_Change));
}
void textbox_Change(object sender, EventArgs e)
{
    this.tbChanging.Text = webBrowser1.Document.GetElementById("onchangingTestArea").InnerHtml;
}

获取Javascript变量

针对简单Javascript变量、JSON对象、Javascript普通对象的获取都是一样的，可以通过一个Javascript的函数返回我们需要的变量/对象，然后通过C#获取。以下仅以JSON对象为例。

    <script language="javascript" type="text/javascript">
        var jsVar = 1;

        var jsJSON = { Name: "ObjectName", Value: "ObjectValue" };

        var Obj = function() {
            this.Key = "ObjKey";
            this.Value = "ObjValue";
        }

        var jsobj = new Obj();

        function GetJsVar() {
            return jsVar;
        }
        function GetJSON() {
            return jsJSON;
        }
        function GetJsObj() {
            return jsobj;
        }
    </script>

以下是C#代码：

object tmp = webBrowser1.Document.InvokeScript("GetJSON");
if (tmp != null)
{
    Type t = tmp.GetType();
    object name = t.InvokeMember("Name", BindingFlags.GetProperty, null, tmp, null);
    object value = t.InvokeMember("Value", BindingFlags.GetProperty, null, tmp, null);
    MessageBox.Show(string.Format("jsJSON = {0}\n\njsJSON.Name = {1}\njsJSON.Value = {2}",
                                    tmp, name ?? "[NULL]", value ?? "[NULL]"), "C/S对话框");
}
else
    MessageBox.Show("未找到对象");

调用Javascript对象的实例方法

继续使用上文的Obj对象，并实现如下方法

 <script language="javascript" type="text/javascript">
        Obj.prototype.MyMethod = function(para) {
            alert("执行Javascript对象的方法成功！\n\n传入参数为：" + para);
            this.Value = para;
            return "this.Key = " + this.Key + ", this.Value = " + this.Value;
        }
    </script>

以下是C#代码：

object tmp = webBrowser1.Document.InvokeScript("GetJsObj");
if (tmp != null)
{
    Type t = tmp.GetType();
    object result = t.InvokeMember("MyMethod",
        BindingFlags.InvokeMethod, null,
        tmp, new object[] { tbPara2.Text });  //tbPara2 是C/S文本框
    MessageBox.Show(string.Format("jsobj.MyMethod(para) 返回了：\n\n{0}",
        result ?? "[NULL]"), "C/S对话框");
}
else
    MessageBox.Show("未找到对象");