Winform WebBrowser自定义方法供js调用总结

最近在做一个Winform上的东西，作为一个大多数时间都在写Web程序的人来说，做这个肯定会想到要结合Web程序来做嘛，所以这个时候就会涉及到Winform里面的控件WebBrowser了，所以这篇Blog就主要是围绕着WebBrowser来写了对吧！OK！废话不多说了，进入重点！

　　既然整个程序主要是在展示为主，所在Winform上的界面优化就不会有多少，因为程序是全屏处理的，所以说是根本就看不到原WinForm的界面的哈！

　　这个时候也就会存在一会关闭程序的问题了，没有了Winform界面，怎么关闭程序呢，那唯一的方式就是通过Web程序来关闭了，但是Web程序和Winform又是完全独立的两个东西，怎么让他们联系起来呢！我的想法有两个：

　　1：通过URL地址来进行判断，我们定义一个关闭程序的地址连接，访问这个地址的时候就将程序关闭，

　　2：通过文档里面的元素来关闭程序，

　　3：能不能通过Web程序里面的js来调用Winform的方法来关闭呢，因为大家都知道的是Webbrowser是可以调用Web程序的js的！

　　所以按照这么两种想法，开始实施吧（做一个Demo讲解吧）

　　新建一个名叫WinWebBrowserDemo的程序开始吧，拖一个WebBrowser控件到MainForm上去(更改Form1为MainForm)，整个界面如下

　　

　　一片空白什么都没有哦，本来就是这样的嘛，但是怎么来判断一个连接是不是关闭程序的连接呢，这时就要用到了WebBrowser控件的一个事件了，我们将程序切到代码页面！

　　用到的这事件就是Navigating事件！

　　这个事件能捕获到正在访问的页面的地址信息，并且在这里我们可以控制这个地址是不是可以正确的访问过去，我们可能根据得到的地址，将地址改为另一个地址，也可以取消这个访问事件，停止访问！

　　下面我们来编写这个事件吧，比如：我们定义exist.htm为关闭程序的连接吧，以方便现在的代码的编写！代码如下

                 void webBrowser1_Navigating(object sender, WebBrowserNavigatingEventArgs e)
                {
                        //throw new NotImplementedException();
                        //这里判断这个地址是不是包含了我们定义的关闭程序的地址
                        if (e.Url.AbsoluteUri.ToLower().Contains("exist.htm"))
                        {
                                //如果是取消访问，并关闭窗体或程序
                                e.Cancel = true;
                                this.Close();
                                //关闭程序
                             // Application.Exit();
                        }
                }

　　

　　 OK！这样就话只要我们访问到这样的一个页面就会将程序关闭了！

　　当然，有时候我们，想要给页面上的元素标签，加上一些Js事件事件，不用他原来的时候，这个时候我们又怎样来给这个元素标签加上相应的事件呢，这里要注意的是，这些js事件是在页面当中存在的自定义事件，或者是js的自带事件！或者调用Webbrowser里面的一些方法！这个时候就要访问整个页面的文档了，来找出其中的某个元素或某些元素！这里要用到Webbrowser的DocumentCompleted事件，这个事件可以将正在访问的这个页面的所有信息获取到

　　比如我们想找到页面里面的一个id号为btnHello的按钮，代码如下

                 void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
                {
                        //throw new NotImplementedException();
                        HtmlDocument CurentDocument = webBrowser1.Document;
                        HtmlElement btnHello = CurentDocument.GetElementById("btnHello");
                        btnHello.Click += new HtmlElementEventHandler(btnHello_Click);
                }

                void btnHello_Click(object sender, HtmlElementEventArgs e)
                {
                        //throw new NotImplementedException();
                        HtmlElement btnHello = sender as HtmlElement;
                        //这个是调用的Winfrom方法
                        MessageBox.Show(btnHello.GetAttribute("value"),"调用C#方法");
                        //这里调用js方法,两都是不一样的哦注意
                        webBrowser1.Document.InvokeScript("alert", new object[] { btnHello.GetAttribute("value")+"调用js方法" });
                }

 

　　　这里我们也可以定义一个叫btnClose的按钮来关闭程序哦!这里就不写代码了，方法和上面的是一样的哈！

　　下面也是最后一个了，我个人觉得也是最灵活的一个方法，就是自己写一个C#类，在前台供前台js专门调用来控制程序，下面开始吧

　　添加一个新类叫ServerJsToClient!这里要注意了，在这里要给这个类加上COM可访问性的一个修饰如下

        [System.Runtime.InteropServices.ComVisibleAttribute( true)]        
        public class ServerJsToClient

 

　　这样我们就可以在这个类叫写一些方法来供前台js调用了哦，如下，写了一个DialogShow的方法

         /// <summary>
        /// 在客户端HTML页面调用WebBrowser方法类
        /// </summary>
        [System.Runtime.InteropServices.ComVisibleAttribute(true)]        
        public class ServerJsToClient
        {
                /// <summary>
                /// 显示信息
                /// </summary>
                 /// <param name="Caption">显示信息的标题</param>
                 /// <param name="Message">显示的信息</param>
                public void DialogShow(string Caption,string Message)
                {
                        MessageBox.Show(Message, Caption, MessageBoxButtons.OK, MessageBoxIcon.Information);
                }
        }

 

　　类是写出来了，但是要怎么来调用呢，返回到MainForm代码里面来吧，在MainForm_Load里面加上一句话

　　

webBrowser1.ObjectForScripting = new ServerJsToClient();

 

　　这样你就可以在js中调用这个类的方法咯！

　　开始写js调用这个类里面的方法吧，我们添加一个js文件External.js，在这里面我们专门写一个类来调用Webbrowser里面的类的方法，如下

　　

var WEBBROWSER = function () {
///<summary>
///调用WebBrowser方法封装类
///</summary>
this.Show = function (caption, msg) {
///<summary>
///显示消息
///</summary>
///<param name="caption">标题</param>
///<param name="msg">消息</param>
window.external.DialogShow(caption,msg);
}
}

 

　　这里用到的就是window.external,这么一个js调用扩展的js方法的东东，这样就可以正解的调用Webbrowser里面的方法了

　　HTML代码如下吧

　　

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
        <title> </title>
         <script type="text/javascript" src="External.js"> </script>
         <script type="text/javascript">
                var myBrowser = new WEBBROWSER();
                function Show() {
                        myBrowser.Show("警告", "我要警告你!");
                }
         </script>
</head>
<body>
        <a onclick="Show();" href="javascript:;"> 警告 </a>
         <br />
        <a href="exist.htm">关闭程序 </a>
         <br />
        <input type="button" id="btnHello" value="点我然后!Webbrowser调用js方法哦" />
</body>
</html>

 

　　OK！到这里就算完成了，如果要关闭程序也可以自己写一个关闭的哦！程序放在附件中了哈!

　　谢谢大家，这里只是我在做程序中遇到的一个问题的总结，有什么写的不足的地方，请大家指出谢谢！