黄聪：WebBrowser执行和安装jQuery脚本（IEBrowse）

上一文章说明了如何让 js 脚本访问 .NET 中的类, 这次希望给大家说明一下在任意页面中安装 jQuery 脚本, 并操作页面上的元素.

其实在第一篇关于 IEBrowser 的文章当中, 已经有了一段 jQuery 的示例, 但可能由于篇幅原因, 没有过多的解释, 所以决定单独写一篇来重新说明.

这次准备的例子也是较为简单的, 实现了模拟用户搜索百度, 请大家看下面的代码:

if ( string.IsNullOrEmpty ( this.txtKeyword.Text ) )
    return;

IEBrowser ie = new IEBrowser ( this.webBrowser );

ie.Navigate ( "http://www.baidu.com/" );

ie.IEFlow.Wait ( new UrlCondition ( "wait", "http://www.baidu.com/", StringCompareMode.StartWith ) );

ie.InstallJQuery ( JQuery.CodeMin );

ie.ExecuteJQuery ( JQuery.Create ( "'#kw'" ).Val ( "'" + this.txtKeyword.Text.Trim ( ) + "'" ) );

ie.ExecuteJQuery ( JQuery.Create ( "'#su'" ).Click ( ) );

Console.WriteLine(ie.ExecuteJQuery<string>(JQuery.Create("'title'").Text()));

这段有效代码不超过 10 行的代码段, 模拟了导航并等待百度页面, 之后模拟用户搜索、输出标题的功能，

在窗口上, 我们拥有一个名称为 webBrowser 的 WebBrowser 控件和一个名称为 txtKeyword 的TextBox 控件.

在代码开始时, 我们首先判断了用户输入的关键词是否为空, 如果为空则直接 return, 而关键词用于在百度中搜索.

之后, 我们使用了 IEBrowser 的 Navigate 和 IEFlow 的 Wait 方法来导航并等待载入百度页面.Wait 方法用于让程序等待某个条件成立后才继续向下执行, 而代码中我们指定的是一个UrlCondition, 也就是一个页面条件, StringCompareMode 设置为 StartWith 表示等待地址以"http://www.baidu.com/" 开始的页面载入.

当页面载入之后, 我们执行 IEBrowser 的 InstallJQuery 方法来为页面安装 jQuery 脚本. 而InstallJQuery 方法有两种形式, 一种可以载入字符串作为脚本, 另一种是传递一个 Uri 作为参数, Uri是一个网络的地址或者一个本地文件的地址, 在示例中, 我们使用的是第一种形式, 类 JQuery 的静态属性 CodeMin 返回了 jQuery 的压缩后的脚本.

下面, 我们将两行重要的代码重新列出, 在代码中, 我们传递 JQuery 类作为参数给IEBrowser 的 ExecuteJQuery 方法, 以在 WebBrowser 的页面中执行 jQuery 脚本.

ie.ExecuteJQuery ( JQuery.Create ( "'#kw'" ).Val ( "'" + this.txtKeyword.Text.Trim ( ) + "'" ) );

ie.ExecuteJQuery ( JQuery.Create ( "'#su'" ).Click ( ) );

我们可以使用 JQuery 的静态方法 Create, 或者 new JQuery 来创建一个 JQuery 的实例. 第一行的JQuery 对象所对应的 jQuery 脚本为 $('#kw').val('<用户输入的关键词>');, 而第二行的 JQuery 对象对应了 $('#su').click();.

在这里, JQuery 类和实际的 js 脚本中的 jQuery 的用法几乎是相同的, 只不过 Create 表示 $, 而jQuery 的成员在 JQuery 类中都变成了大写, 但成员名称并无变化. JQuery 类用于在 .NET 中构建jQuery 脚本并作为参数传递给 IEBrowser 执行.

其实, 你也可以通过 IEBrowser 的 ExecuteScript 来直接执行 jQuery 脚本, 其效果也是完全一样的.

而这两句 jQuery 的含义, 表示将用户输入的关键词填入到页面的搜索框中, 然后点击搜索按钮, kw 和 su 分别是百度页面中的搜索框和搜索按钮的 id, '#kw' 则表示取 id 为 kw 的页面元素, 这些都是设计到 jQuery 本身的内容了, 大家可以参考 http://jquery.com .

代码到这里也就讲完了, 需要看实际运行效果的话, 可以参照下面的演示.

IEBrowser 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码

备用下载链接：IEBrowser.2.5.0.Debug.NOPARAM.zip