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

待我称王封你为后i 2024-04-18 11:05 48阅读 0赞

最近在做一个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)，整个界面如下

![130609771.jpg][]

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

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

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

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

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

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

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

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

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

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

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

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

![InBlock.gif][]        \[System.Runtime.InteropServices.ComVisibleAttribute( true)\]          
![InBlock.gif][]         public  class ServerJsToClient

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

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

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

![InBlock.gif][]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！到这里就算完成了，如果要关闭程序也可以自己写一个关闭的哦！程序放在附件中了哈!

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

[130609771.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/2ae2482f3ee842c3878b78234dea1c88.jpg
[InBlock.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/6d5a55cabdd147c8a0d6a8d98bd06a1a.gif