精华内容
下载资源
问答
  • WebBrowser页面与WinForm交互技巧

    千次阅读 2014-06-20 17:35:00
    现在的问题是,所有逻辑都可以放在HTML文件里,唯独“关闭”按钮遇到了困难——通常,Web页面是没有办法直接控制浏览器的,更不用...但是,在.Net 2.0当中,“由Windows Form响应Web页面的事件”已经成为了现实。
    现在有这样一个Windows Application,它的界面上只有一个WebBrowser,显示一个本地的HTML文件作为界面。现在的问题是,所有逻辑都可以放在HTML文件里,唯独“关闭”按钮遇到了困难——通常,Web页面是没有办法直接控制浏览器的,更不用说结束这个WinForm程序了。

    但是,在.Net 2.0当中,“由Windows Form响应Web页面的事件”已经成为了现实。

    在.Net 2.0中,整个HTML文档以及其包含的各个HTML元素,都和一个个HtmlDocument、HtmlElement之类的.Net对象对应。因此只要找到这个“关闭”按钮对应的HtmlElement对象,为其click事件添加Event Handler即可。 

    假设HTML源代码如下: 

    <html> 
    <body> 
    <input type="button" id="btnClose" value="关闭" /> 
    </body> 
    </html> 
    那么找出该按钮并为之添加Event Handler的代码如下: 



    HtmlDocument htmlDoc = webBrowser.Document; 
    HtmlElement btnElement = htmlDoc.All["btnClose"]; 
    if (btnElement != null) 

        btnElement.click += new HtmlElementEventHandler(HtmlBtnClose_Click); 


    其中HtmlBtnClose_Click是按下Web按钮时的Event Handler。 

    很简单吧?那么稍稍高级一点的——我们都知道一个HTML元素可能有很多各种各样的事件,而HtmlElement这个类只给出最常用、共通的几个。那么,如何响应其他事件呢?这也很简单,只需要调用HtmlElement的AttachEventHandler就可以了:

    btnElement.AttachEventHandler("onclick", new EventHandler(HtmlBtnClose_Click));  
    //这一句等价于上面的btnElement.click += new HtmlElementEventHandler(HtmlBtnClose_Click);  
    对于其他事件,把"onclick"换成该事件的名字就可以了。例如: 

    formElement.AttachEventHandler("onsubmit", new EventHandler(HtmlForm_Submit));  

    Study Case 2:表单(form)的自动填写和提交 

    要使我们的WebBrowser具有自动填表、甚至自动提交的功能,并不困难。 

    假设有一个最简单的登录页面,输入用户名密码,点“登录”按钮即可登录。已知用户名输入框的id(或Name,下同)是username,密码输入框的id是password,“登录”按钮的id是submitbutton,那么我们只需要在webBrowser的DocumentCompleted事件中使用下面的代码即可:

    HtmlElement btnSubmit = webBrowser.Document.All["submitbutton"]; 
    HtmlElement tbUserid = webBrowser.Document.All["username"]; 
    HtmlElement tbPasswd = webBrowser.Document.All["password"]; 

    if (tbUserid == null || tbPasswd == null || btnSubmit == null) 
        return; 

    tbUserid.SetAttribute("value", "smalldust"); 
    tbPasswd.SetAttribute("value", "12345678"); 

    btnSubmit.InvokeMember("click"); 
    这里我们用SetAttribute来设置文本框的“value”属性,用InvokeMember来调用了按钮的“click”方法。因为不同的Html元素,其拥有的属性和方法也不尽相同,所以.Net 2.0提供了统一的HtmlElement来概括各种Html元素的同时,提供了这两个方法以调用元素特有的功能。关于各种Html元素的属性和方法一览,可以查阅MSDN的DHTML Reference。 

    ※关于表单的提交,的确还有另一种方法就是获取form元素而不是button,并用form元素的submit方法: 

    HtmlElement formLogin = webBrowser.Document.Forms["loginForm"];  
    //……  
    formLogin.InvokeMember("submit");  
    本文之所以没有推荐这种方法,是因为现在的网页,很多都在submit按钮上添加onclick事件,以对提交的内容做最基本的验证。如果直接使用form的submit方法,这些验证代码就得不到执行,有可能会引起错误。 


    Study Case 3:查找并选择文本 

    这次我们希望实现一个和IE一模一样的查找功能,以对Web页面内的文字进行查找。 

    文本查找要借助于TextRange对象的findText方法。但是,.Net里并没有这个对象。这是因为,.Net 2.0提供的HtmlDocument,HtmlWindow,HtmlElement等类,只不过是对原有mshtml这个COM组件的不完整封装,只提供了mshtml的部分功能。所以许多时候,我们仍旧要借助mshtml来实现我们需要的功能。好在这些.Net类都提供了DomDocument这个属性,使得我们很容易把.Net对象转换为COM对象使用。下面的代码演示了如何查找Web页面的文本。 
    (需要添加mshtml的引用,并加上using mshtml;) 


        public partial class SearchDemo : Form
        {
            // 建立一个查找用的TextRange(IHTMLTxtRange接口) 
            private IHTMLTxtRange searchRange = null;
            public SearchDemo()
            {
                InitializeComponent();
            }

            private void btnSearch_Click(object sender, EventArgs e)
            {
                // Document的DomDocument属性,就是该对象内部的COM对象。 
                IHTMLDocument2 document = (IHTMLDocument2)webBrowser.Document.DomDocument;
                string keyword = txtKeyword.Text.Trim();
                if (keyword == "")
                    return;

                // IE的查找逻辑就是,如果有选区,就从当前选区开头+1字符处开始查找;没有的话就从页面最初开始查找。 
                // 这个逻辑其实是有点不大恰当的,我们这里不用管,和IE一致即可。 
                if (document.selection.type.ToLower() != "none")
                {
                    searchRange = (IHTMLTxtRange)document.selection.createRange();
                    searchRange.collapse(true);
                    searchRange.moveStart("character", 1);
                }
                else
                {
                    IHTMLBodyElement body = (IHTMLBodyElement)document.body;
                    searchRange = (IHTMLTxtRange)body.createTextRange();
                }

                // 如果找到了,就选取(高亮显示)该关键字;否则弹出消息。 
                if (searchRange.findText(keyword, 1, 0))
                {
                    searchRange.select();
                }
                else
                {
                    MessageBox.Show("已搜索到文档结尾。");
                }
            }
        } 
    到此为止,简单的查找就搞定了。至于替换功能,看了下一个例子,我相信你就可以触类旁通轻松搞定了。 

    Study Case 4:高亮显示 

    上一个例子中我们学会了查找文本——究跟到底,对Web页面还是只读不写。那么,如果说要把所有的搜索结果高亮显示呢?我们很快会想到把所有匹配的文字颜色、背景改一下就可以了。 

    首先想到的可能是直接修改HTML文本吧……但是,与SourceCode的高亮显示不同,我们需要并且只需要高亮页面中的文本部分。HTML标签、脚本代码等等是绝对不应该去改动的。因此我们不能把整个页面的Source Code读进来然后replace,那样有破坏HTML文件结构的可能;我们只能在能够分离出文本与其他内容(标签,脚本……)的前提下进行。 

    具体方法有很多,下面提供两个比较简单的方法。 


    方法一:使用TextRange(IHTMLTxtRange) 
    有了上一个Case的基础,相信大家立刻会想到使用TextRange。没错,TextRange除了提供查找方法之外,还提供了一个pasteHTML方法,以指定的HTML文本替换当前TextRange中的内容。代码片断如下: 

        public partial class HilightDemo : Form 
        { 
            // 定义高亮显示效果的标签。 
            string tagBefore = "<span style='background-color:yellow;color:black'>"; 
            string tagAfter = "</span>"; 

            // …… 

            private void btnHilight_Click(object sender, EventArgs e) 
            { 
                HtmlDocument htmlDoc = webBrowser.Document; 
                string keyword = txtKeyword.Text.Trim(); 
                if (keyword == "") 
                    return; 

                object oTextRange = htmlDoc.Body.InvokeMember("createTextRange"); 

                mshtml.IHTMLTxtRange txtrange = oTextRange as mshtml.IHTMLTxtRange; 

                while (txtrange.findText(keyword, 1, 4)) 
                { 
                    try 
                    { 
                        txtrange.pasteHTML(tagBefore + keyword + tagAfter); 
                    } 
                    catch { } 
                    txtrange.collapse(false); 
                } 
            } 
        } 

    ※这段代码里获取IHTMLTxtRange的方式和上面的例子稍稍不同,其实所谓条条大路通罗马,本质是一样的。 

    方法二:使用DOM(文档对象模型) 
    将HTML文档解析为DOM,然后遍历每个节点,在其中搜索关键字并进行相应替换处理即可。 

        public partial class HilightDemo : Form 
        { 
            //…… 

            private void btnHilight_Click(object sender, EventArgs e) 
            { 
                HTMLDocument document = (HTMLDocument)webBrowser.Document.DomDocument; 
                IHTMLDOMNode bodyNode = (IHTMLDOMNode)webBrowser.Document.Body.DomElement; 
                string keyword = txtKeyword.Text.Trim(); 
                if (keyword == "") 
                    return; 

                HilightText(document, bodyNode, keyword); 
            } 

            private void HilightText(HTMLDocument document, IHTMLDOMNode node, string keyword) 
            { 
                // nodeType = 3:text节点 
                if (node.nodeType == 3) 
                { 
                    string nodeText = node.nodeValue.ToString(); 
                    // 如果找到了关键字 
                    if (nodeText.Contains(keyword)) 
                    { 
                        IHTMLDOMNode parentNode = node.parentNode; 
                        // 将关键字作为分隔符,将文本分离,并逐个添加到原text节点的父节点 
                        string[] result = nodeText.Split(new string[] { keyword }, StringSplitOptions.None); 
                        for (int i = 0; i < result.Length - 1; i++) 
                        { 
                            if (result[i] != "") 
                            { 
                                IHTMLDOMNode txtNode = document.createTextNode(result[i]); 
                                parentNode.insertBefore(txtNode, node); 
                            } 
                            IHTMLDOMNode orgNode = document.createTextNode(keyword); 
                            IHTMLDOMNode hilightedNode = (IHTMLDOMNode)document.createElement("SPAN"); 
                            IHTMLStyle style = ((IHTMLElement)hilightedNode).style; 
                            style.color = "black"; 
                            style.backgroundColor = "yellow"; 
                            hilightedNode.appendChild(orgNode); 

                            parentNode.insertBefore(hilightedNode, node); 
                        } 
                        if (result[result.Length - 1] != "") 
                        { 
                                IHTMLDOMNode postNode = document.createTextNode(result[result.Length - 1]); 
                                parentNode.insertBefore(postNode, node); 
                        } 
                        parentNode.removeChild(node); 
                    } // End of nodeText.Contains(keyword) 
                } 
                else 
                { 
                    // 如果不是text节点,则递归搜索其子节点 
                    IHTMLDOMChildrenCollection childNodes = node.childNodes as IHTMLDOMChildrenCollection; 
                    foreach (IHTMLDOMNode n in childNodes) 
                    { 
                        HilightText(document, n, keyword); 
                    } 
                } 
            } 
        } 

    上面的两段代码都是为了清晰易懂而精简得不能再简的,有很多地方很不完善。比如,没考虑到如何从高亮显示状态复原;也没有大小写匹配等等。当然,掌握了原理之后相信这些都不会太难。 

    这两种方法各有优缺点: 
    使用TextRange较轻量迅速,而且有一个特长,就是可以把跨标签(Tag)的关键字挑出来。例如,有这么一段HTML: 

    <b>Hel</b>lo World! 
    先不管作者出于什么目的让Hel三个字母成为粗体,总之显示在页面上的是一句“Hello World!”。在我们希望高亮页面中的“Hello”这个关键字时,如果用DOM分析的话,会得出含有“Hel”的<b>节点和文本节点“lo World!”两个节点,因此无法将其挑出来。而TextRange则能正确识别,将其设置为高亮。因此也可以说TextRange是只和文本有关,和HTML语法结构无关的对象。 

    但是,TextRange也有其致命缺点,加亮容易,反向的话就很难。换句话说,去除高亮显示的时候不能再用TextRange,而需要采用其他方法。 

    而DOM方法则正好相反, 由于DOM的树状结构特性,虽然不能(或者很难)跨越Tag搜索关键字,但是去除高亮显示并不繁琐。

    Study Case 5:与脚本的互操作 

    在Case 1当中,我们已经看到,Web页面的HTML元素的事件,可以由Windows Form端来响应,可以在某种程度上看作是Web页面调用WinForm;那么反过来,WinForm除了可以直接访问Web页面的HTML元素之外,能否调用Web页面里的各种Script呢?

    首先是调用Web页面的脚本中已经定义好的函数。假设HTML中有如下Javascript:

    function DoAdd(a, b) {
        return a + b;
    }
    那么,我们要在WinForm调用它,只需如下代码即可:

    object oSum = webBrowser.Document.InvokeScript("DoAdd", new object[] { 1, 2 });
    int sum = Convert.ToInt32(oSum);
    其次,如果我们想执行一段Web页面中原本没有的脚本,该怎么做呢?这次.Net的类没有提供,看来还要依靠COM了。IHTMLWindow2可以将任意的字符串作为脚本代码来执行。

    string scriptline01 = @"function ShowPageInfo() {";
    string scriptline02 = @"     var numLinks = document.links.length; ";
    string scriptline03 = @"     var numForms = document.forms.length; ";
    string scriptline04 = @"     var numImages = document.images.length; ";
    string scriptline05 = @"     var numScripts = document.scripts.length; ";
    string scriptline06 = @"     alert('网页的统计结果:\r\n链接数:' + numLinks + ";
    string scriptline07 = @"        '\r\n表单数:' + numForms + ";
    string scriptline08 = @"        '\r\n图像数:' + numImages + ";
    string scriptline09 = @"        '\r\n脚本数:' + numScripts);}";
    string scriptline10 = @"ShowPageInfo();";

    string strScript = scriptline01 + scriptline02 + scriptline03 + scriptline04 + scriptline05 +
                       scriptline06 + scriptline07 + scriptline08 + scriptline09 + scriptline10;

    IHTMLWindow2 win = (IHTMLWindow2)webBrowser.Document.Window.DomWindow;
    win.execScript(strScript, "Javascript"); 
    展开全文
  • C# WebBrowser页面与WinForm交互技巧

    千次阅读 2014-05-02 21:33:10
    本文将通过几个实际的例子,初步介绍一下WinForm和WebBrowser所包含的Web页面之间的交互。 下面的代码假设你已经建立了一个Windows Form,上面有一个WebBrowser名为“webBrowser”。 Study Case 1:用WinForm...
    

    话说有了WebBrowser类,终于不用自己手动封装SHDocVw的AxWebBrowser这个ActiveX控件了。这个类如果仅仅作为一个和IE一模一样浏览器,那就太没意思了(还不如直接用IE呢)。那么,无论我们是想做一个“定制版IE”,还是希望利用HTML来做用户界面(指WinApp而非WebApp。许多单机软件,包括Windows的帮助支持中心,都是HTML做的),都少不了Windows Form和包含在WebBrowser中的Web页面的交互。本文将通过几个实际的例子,初步介绍一下WinForm和WebBrowser所包含的Web页面之间的交互。

    下面的代码假设你已经建立了一个Windows Form,上面有一个WebBrowser名为“webBrowser”。

    Study Case 1:用WinForm的Event Handler响应Web页面的事件

    现在有这样一个Windows Application,它的界面上只有一个WebBrowser,显示一个本地的HTML文件作为界面。现在的问题是,所有逻辑都可以放在HTML文件里,唯独“关闭”按钮遇到了困难——通常,Web页面是没有办法直接控制浏览器的,更不用说结束这个WinForm程序了。

    但是,在.Net 2.0当中,“由Windows Form响应Web页面的事件”已经成为了现实。

    在.Net 2.0中,整个HTML文档以及其包含的各个HTML元素,都和一个个HtmlDocument、HtmlElement之类的.Net对象对应。因此只要找到这个“关闭”按钮对应的HtmlElement对象,为其click事件添加Event Handler即可。 

    假设HTML源代码如下:

    <html> 
    <body> 
    <input type="button" id="btnClose" value="关闭" /> 
    </body> 
    </html>

    那么找出该按钮并为之添加Event Handler的代码如下: 

    HtmlDocument htmlDoc = webBrowser.Document; 
    HtmlElement btnElement 
    = htmlDoc.All["btnClose"]; 
    if (btnElement != null) 
    { 
        btnElement.click 
    += new HtmlElementEventHandler(HtmlBtnClose_Click); 
    } 

    其中HtmlBtnClose_Click是按下Web按钮时的Event Handler。

    很简单吧?那么稍稍高级一点的——我们都知道一个HTML元素可能有很多各种各样的事件,而HtmlElement这个类只给出最常用、共通的几个。那么,如何响应其他事件呢?这也很简单,只需要调用HtmlElement的AttachEventHandler就可以了:

    btnElement.AttachEventHandler("onclick"new EventHandler(HtmlBtnClose_Click));  
    //这一句等价于上面的btnElement.click += new HtmlElementEventHandler(HtmlBtnClose_Click); 

    对于其他事件,把"onclick"换成该事件的名字就可以了。例如:

    formElement.AttachEventHandler("onsubmit"new EventHandler(HtmlForm_Submit)); 


    Study Case 2:表单(form)的自动填写和提交 

    要使我们的WebBrowser具有自动填表、甚至自动提交的功能,并不困难。

    假设有一个最简单的登录页面,输入用户名密码,点“登录”按钮即可登录。已知用户名输入框的id(或Name,下同)是username,密码输入框的id是password,“登录”按钮的id是submitbutton,那么我们只需要在webBrowser的DocumentCompleted事件中使用下面的代码即可:

    HtmlElement btnSubmit = webBrowser.Document.All["submitbutton"]; 
    HtmlElement tbUserid 
    = webBrowser.Document.All["username"]; 
    HtmlElement tbPasswd 
    = webBrowser.Document.All["password"]; 

    if (tbUserid == null || tbPasswd == null || btnSubmit == null) 
        
    return; 

    tbUserid.SetAttribute(
    "value""smalldust"); 
    tbPasswd.SetAttribute(
    "value""12345678"); 

    btnSubmit.InvokeMember(
    "click");

    这里我们用SetAttribute来设置文本框的“value”属性,用InvokeMember来调用了按钮的“click”方法。因为不同的Html元素,其拥有的属性和方法也不尽相同,所以.Net 2.0提供了统一的HtmlElement来概括各种Html元素的同时,提供了这两个方法以调用元素特有的功能。关于各种Html元素的属性和方法一览,可以查阅MSDN的DHTML Reference

    ※关于表单的提交,的确还有另一种方法就是获取form元素而不是button,并用form元素的submit方法:

    HtmlElement formLogin = webBrowser.Document.Forms["loginForm"];  
    //……  
    formLogin.InvokeMember("submit"); 

    本文之所以没有推荐这种方法,是因为现在的网页,很多都在submit按钮上添加onclick事件,以对提交的内容做最基本的验证。如果直接使用form的submit方法,这些验证代码就得不到执行,有可能会引起错误。 


    Study Case 3:查找并选择文本 

    这次我们希望实现一个和IE一模一样的查找功能,以对Web页面内的文字进行查找。

    文本查找要借助于TextRange对象的findText方法。但是,.Net里并没有这个对象。这是因为,.Net 2.0提供的HtmlDocument,HtmlWindow,HtmlElement等类,只不过是对原有mshtml这个COM组件的不完整封装,只提供了mshtml的部分功能。所以许多时候,我们仍旧要借助mshtml来实现我们需要的功能。好在这些.Net类都提供了DomDocument这个属性,使得我们很容易把.Net对象转换为COM对象使用。下面的代码演示了如何查找Web页面的文本。 
    (需要添加mshtml的引用,并加上using mshtml;)

        public partial class SearchDemo : Form
        {
            
    // 建立一个查找用的TextRange(IHTMLTxtRange接口) 
            private IHTMLTxtRange searchRange = null;
            
    public SearchDemo()
            {
                InitializeComponent();
            }

            
    private void btnSearch_Click(object sender, EventArgs e)
            {
                
    // Document的DomDocument属性,就是该对象内部的COM对象。 
                IHTMLDocument2 document = (IHTMLDocument2)webBrowser.Document.DomDocument;
                
    string keyword = txtKeyword.Text.Trim();
                
    if (keyword == "")
                    
    return;

                
    // IE的查找逻辑就是,如果有选区,就从当前选区开头+1字符处开始查找;没有的话就从页面最初开始查找。 
                
    // 这个逻辑其实是有点不大恰当的,我们这里不用管,和IE一致即可。 
                if (document.selection.type.ToLower() != "none")
                {
                    searchRange 
    = (IHTMLTxtRange)document.selection.createRange();
                    searchRange.collapse(
    true);
                    searchRange.moveStart(
    "character"1);
                }
                
    else
                {
                    IHTMLBodyElement body 
    = (IHTMLBodyElement)document.body;
                    searchRange 
    = (IHTMLTxtRange)body.createTextRange();
                }

                
    // 如果找到了,就选取(高亮显示)该关键字;否则弹出消息。 
                if (searchRange.findText(keyword, 10))
                {
                    searchRange.select();
                }
                
    else
                {
                    MessageBox.Show(
    "已搜索到文档结尾。");
                }
            }
        } 

    到此为止,简单的查找就搞定了。至于替换功能,看了下一个例子,我相信你就可以触类旁通轻松搞定了。 

    Study Case 4:高亮显示 

    上一个例子中我们学会了查找文本——究跟到底,对Web页面还是只读不写。那么,如果说要把所有的搜索结果高亮显示呢?我们很快会想到把所有匹配的文字颜色、背景改一下就可以了。

    首先想到的可能是直接修改HTML文本吧……但是,与SourceCode的高亮显示不同,我们需要并且只需要高亮页面中的文本部分。HTML标签、脚本代码等等是绝对不应该去改动的。因此我们不能把整个页面的Source Code读进来然后replace,那样有破坏HTML文件结构的可能;我们只能在能够分离出文本与其他内容(标签,脚本……)的前提下进行。 

    具体方法有很多,下面提供两个比较简单的方法。 

    方法一:使用TextRange(IHTMLTxtRange) 
    有了上一个Case的基础,相信大家立刻会想到使用TextRange。没错,TextRange除了提供查找方法之外,还提供了一个pasteHTML方法,以指定的HTML文本替换当前TextRange中的内容。代码片断如下:

        public partial class HilightDemo : Form 
        { 
            
    // 定义高亮显示效果的标签。 
            string tagBefore = "<span style='background-color:yellow;color:black'>"; 
            
    string tagAfter = "</span>"; 

            
    // …… 

            
    private void btnHilight_Click(object sender, EventArgs e) 
            { 
                HtmlDocument htmlDoc 
    = webBrowser.Document; 
                
    string keyword = txtKeyword.Text.Trim(); 
                if (keyword == "") 
                    return; 

                
    object oTextRange = htmlDoc.Body.InvokeMember("createTextRange"); 

                mshtml.IHTMLTxtRange txtrange 
    = oTextRange as mshtml.IHTMLTxtRange; 

                
    while (txtrange.findText(keyword, 14)) 
                { 
                    
    try 
                    { 
                        txtrange.pasteHTML(tagBefore 
    + keyword + tagAfter); 
                    } 
                    
    catch { } 
                    txtrange.collapse(
    false); 
                } 
            } 
        }


    ※这段代码里获取IHTMLTxtRange的方式和上面的例子稍稍不同,其实所谓条条大路通罗马,本质是一样的。 

    方法二:使用DOM(文档对象模型) 
    将HTML文档解析为DOM,然后遍历每个节点,在其中搜索关键字并进行相应替换处理即可。

        public partial class HilightDemo : Form 
        { 
            
    //…… 

            
    private void btnHilight_Click(object sender, EventArgs e) 
            { 
                HTMLDocument document 
    = (HTMLDocument)webBrowser.Document.DomDocument; 
                IHTMLDOMNode bodyNode 
    = (IHTMLDOMNode)webBrowser.Document.Body.DomElement; 
                
    string keyword = txtKeyword.Text.Trim(); 
                
    if (keyword == "") 
                    
    return; 

                HilightText(document, bodyNode, keyword); 
            } 

            
    private void HilightText(HTMLDocument document, IHTMLDOMNode node, string keyword) 
            { 
                
    // nodeType = 3:text节点 
                if (node.nodeType == 3) 
                { 
                    
    string nodeText = node.nodeValue.ToString(); 
                    
    // 如果找到了关键字 
                    if (nodeText.Contains(keyword)) 
                    { 
                        IHTMLDOMNode parentNode 
    = node.parentNode; 
                        
    // 将关键字作为分隔符,将文本分离,并逐个添加到原text节点的父节点 
                        string[] result = nodeText.Split(new string[] { keyword }, StringSplitOptions.None); 
                        
    for (int i = 0; i < result.Length - 1; i++) 
                        { 
                            
    if (result[i] != "") 
                            { 
                                IHTMLDOMNode txtNode 
    = document.createTextNode(result[i]); 
                                parentNode.insertBefore(txtNode, node); 
                            } 
                            IHTMLDOMNode orgNode 
    = document.createTextNode(keyword); 
                            IHTMLDOMNode hilightedNode 
    = (IHTMLDOMNode)document.createElement("SPAN"); 
                            IHTMLStyle style 
    = ((IHTMLElement)hilightedNode).style; 
                            style.color 
    = "black"; 
                            style.backgroundColor 
    = "yellow"; 
                            hilightedNode.appendChild(orgNode); 

                            parentNode.insertBefore(hilightedNode, node); 
                        } 
                        
    if (result[result.Length - 1!= "") 
                        { 
                                IHTMLDOMNode postNode 
    = document.createTextNode(result[result.Length - 1]); 
                                parentNode.insertBefore(postNode, node); 
                        } 
                        parentNode.removeChild(node); 
                    } 
    // End of nodeText.Contains(keyword) 
                } 
                
    else 
                { 
                    
    // 如果不是text节点,则递归搜索其子节点 
                    IHTMLDOMChildrenCollection childNodes = node.childNodes as IHTMLDOMChildrenCollection; 
                    
    foreach (IHTMLDOMNode n in childNodes) 
                    { 
                        HilightText(document, n, keyword); 
                    } 
                } 
            } 
        } 

    上面的两段代码都是为了清晰易懂而精简得不能再简的,有很多地方很不完善。比如,没考虑到如何从高亮显示状态复原;也没有大小写匹配等等。当然,掌握了原理之后相信这些都不会太难。 

    这两种方法各有优缺点: 
    使用TextRange较轻量迅速,而且有一个特长,就是可以把跨标签(Tag)的关键字挑出来。例如,有这么一段HTML:

    <b>Hel</b>lo World!

    先不管作者出于什么目的让Hel三个字母成为粗体,总之显示在页面上的是一句“Hello World!”。在我们希望高亮页面中的“Hello”这个关键字时,如果用DOM分析的话,会得出含有“Hel”的<b>节点和文本节点“lo World!”两个节点,因此无法将其挑出来。而TextRange则能正确识别,将其设置为高亮。因此也可以说TextRange是只和文本有关,和HTML语法结构无关的对象。 

    但是,TextRange也有其致命缺点,加亮容易,反向的话就很难。换句话说,去除高亮显示的时候不能再用TextRange,而需要采用其他方法。 

    而DOM方法则正好相反, 由于DOM的树状结构特性,虽然不能(或者很难)跨越Tag搜索关键字,但是去除高亮显示并不繁琐。

    Study Case 5:与脚本的互操作 

    在Case 1当中,我们已经看到,Web页面的HTML元素的事件,可以由Windows Form端来响应,可以在某种程度上看作是Web页面调用WinForm;那么反过来,WinForm除了可以直接访问Web页面的HTML元素之外,能否调用Web页面里的各种Script呢?

    首先是调用Web页面的脚本中已经定义好的函数。假设HTML中有如下Javascript:

    function DoAdd(a, b) {
        
    return a + b;
    }

    那么,我们要在WinForm调用它,只需如下代码即可:

    object oSum = webBrowser.Document.InvokeScript("DoAdd"new object[] { 12 });
    int sum = Convert.ToInt32(oSum);

    其次,如果我们想执行一段Web页面中原本没有的脚本,该怎么做呢?这次.Net的类没有提供,看来还要依靠COM了。IHTMLWindow2可以将任意的字符串作为脚本代码来执行。

    string scriptline01 = @"function ShowPageInfo() {";
    string scriptline02 = @"     var numLinks = document.links.length; ";
    string scriptline03 = @"     var numForms = document.forms.length; ";
    string scriptline04 = @"     var numImages = document.images.length; ";
    string scriptline05 = @"     var numScripts = document.scripts.length; ";
    string scriptline06 = @"     alert('网页的统计结果:\r\n链接数:' + numLinks + ";
    string scriptline07 = @"        '\r\n表单数:' + numForms + ";
    string scriptline08 = @"        '\r\n图像数:' + numImages + ";
    string scriptline09 = @"        '\r\n脚本数:' + numScripts);}";
    string scriptline10 = @"ShowPageInfo();";

    string strScript = scriptline01 + scriptline02 + scriptline03 + scriptline04 + scriptline05 +
                       scriptline06 
    + scriptline07 + scriptline08 + scriptline09 + scriptline10;

    IHTMLWindow2 win 
    = (IHTMLWindow2)webBrowser.Document.Window.DomWindow;
    win.execScript(strScript, 
    "Javascript");

    OK,今天就写到这里吧,再想起什么来再补充吧。欢迎大家多多指正,欢迎讨论。


    原文链接:http://smalldust.cnblogs.com/archive/2006/03/08/345561.html

    展开全文
  • webwser页面与WinForm交互技巧终极解决方案教程实例[ 转贴 ] 最近看到博客园入门教学文章比较流行,自己最近又偷懒比较多,没啥心得,不妨写一篇没啥深度的入门文章吧。 话说有了 WebBrowser 类,终于不用自己...

    <script>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script> [转贴]webwser页面与WinForm交互技巧终极解决方案教程实例[转贴]

    最近看到博客园入门教学文章比较流行,自己最近又偷懒比较多,没啥心得,不妨写一篇没啥深度的入门文章吧。

    话说有了WebBrowser类,终于不用自己手动封装SHDocVw的AxWebBrowser这 个ActiveX控件了。这个类如果仅仅作为一个和IE一模一样浏览器,那就太没意思了(还不如直接用IE呢)。那么,无论我们是想做一个“定制版 IE”,还是希望利用HTML来做用户界面(指WinApp而非WebApp。许多单机软件,包括Windows的帮助支持中心,都是HTML做的),都 少不了Windows Form和包含在WebBrowser中的Web页面的交互。本文将通过几个实际的例子,初步介绍一下WinForm和WebBrowser所包含的Web页面之间的交互。

    下面的代码假设你已经建立了一个Windows Form,上面有一个WebBrowser名为“webBrowser”。


    Study Case 1:用WinForm的Event Handler响应Web页面的事件

    现在有这样一个Windows Application,它的界面上只有一个WebBrowser,显示一个本地的HTML文件作为界面。现在的问题是,所有逻辑都可以放在HTML文件里,唯独“关闭”按钮遇到了困难——通常,Web页面是没有办法直接控制浏览器的,更不用说结束这个WinForm程序了。

    但是,在.Net 2.0当中,“由Windows Form响应Web页面的事件”已经成为了现实。

    在.Net 2.0中,整个HTML文档以及其包含的各个HTML元素,都和一个个HtmlDocument、HtmlElement之类的.Net对象对应。因此只要找到这个“关闭”按钮对应的HtmlElement对象,为其click事件添加Event Handler即可。 

    假设HTML源代码如下: 

    <html> 
    <body> 
    <input type="button" id="btnClose" value="关闭" /> 
    </body> 
    </html>



    那么找出该按钮并为之添加Event Handler的代码如下:

    HtmlDocument htmlDoc = webBrowser.Document;
    HtmlElement btnElement 
    = htmlDoc.All["btnClose"];
    if (btnElement != null)
    {
        btnElement.click 
    += new HtmlElementEventHandler(HtmlBtnClose_Click);
    }




    其中HtmlBtnClose_Click是按下Web按钮时的Event Handler。 

    很简单吧?那么稍稍高级一点 的——我们都知道一个HTML元素可能有很多各种各样的事件,而HtmlElement这个类只给出最常用、共通的几个。那么,如何响应其他事件呢?这也 很简单,只需要调用HtmlElement的AttachEventHandler就可以了:

    1. btnElement.AttachEventHandler(<strong class="s">"onclick"</strong>, <strong class="k">new</strong> EventHandler(HtmlBtnClose_Click)); <br> <br><strong class="c">//这一句等价于上面的btnElement.click += new HtmlElementEventHandler(HtmlBtnClose_Click);</strong>  
    btnElement.AttachEventHandler("onclick", new EventHandler(HtmlBtnClose_Click)); 

    //这一句等价于上面的btnElement.click += new HtmlElementEventHandler(HtmlBtnClose_Click);


    对于其他事件,把"onclick"换成该事件的名字就可以了。例如:

    1. <div style="border: 0.5pt solid windowtext; padding: 4px 5.4pt; background: rgb(230, 230, 230) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 95%;"><div><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"><span style="color: rgb(0, 0, 0);">formElement.AttachEventHandler(</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">onsubmit</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">, </span><span style="color: rgb(0, 0, 255);">new</span><span style="color: rgb(0, 0, 0);"> EventHandler(HtmlForm_Submit));</span></div></div><br>  
    formElement.AttachEventHandler("onsubmit"new EventHandler(HtmlForm_Submit));



    Study Case 2:表单(form)的自动填写和提交

    要使我们的WebBrowser具有自动填表、甚至自动提交的功能,并不困难。 

    假设有一个最简单的登录页面,输入用户名密码,点“登录”按钮即可登录。已知用户名输入框的id(或Name,下同)是username,密码输入框的id是password,“登录”按钮的id是submitbutton,那么我们只需要在webBrowser的DocumentCompleted事件中使用下面的代码即可:

    1. <div style="border: 0.5pt solid windowtext; padding: 4px 5.4pt; background: rgb(230, 230, 230) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 95%;"><div><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"><span style="color: rgb(0, 0, 0);">HtmlElement btnSubmit </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> webBrowser.Document.All[</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">submitbutton</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">];<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top">HtmlElement tbUserid </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> webBrowser.Document.All[</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">username</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">];<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top">HtmlElement tbPasswd </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> webBrowser.Document.All[</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">password</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">];<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"><br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"></span><span style="color: rgb(0, 0, 255);">if</span><span style="color: rgb(0, 0, 0);"> (tbUserid </span><span style="color: rgb(0, 0, 0);">==</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 255);">null</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">||</span><span style="color: rgb(0, 0, 0);"> tbPasswd </span><span style="color: rgb(0, 0, 0);">==</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 255);">null</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">||</span><span style="color: rgb(0, 0, 0);"> btnSubmit </span><span style="color: rgb(0, 0, 0);">==</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 255);">null</span><span style="color: rgb(0, 0, 0);">)<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top">    </span><span style="color: rgb(0, 0, 255);">return</span><span style="color: rgb(0, 0, 0);">;<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"><br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top">tbUserid.SetAttribute(</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">value</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">, </span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">smalldust</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">);<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top">tbPasswd.SetAttribute(</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">value</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">, </span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">12345678</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">);<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"><br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top">btnSubmit.InvokeMember(</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">click</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">);</span></div></div><br>  
    HtmlElement btnSubmit = webBrowser.Document.All["submitbutton"];
    HtmlElement tbUserid 
    = webBrowser.Document.All["username"];
    HtmlElement tbPasswd 
    = webBrowser.Document.All["password"];

    if (tbUserid == null || tbPasswd == null || btnSubmit == null)
        
    return;

    tbUserid.SetAttribute(
    "value""smalldust");
    tbPasswd.SetAttribute(
    "value""12345678");

    btnSubmit.InvokeMember(
    "click");


    这里我们用SetAttribute来设置文本框的“value”属性,用InvokeMember来调用了按钮的“click”方法。因为不同 的Html元素,其拥有的属性和方法也不尽相同,所以.Net 2.0提供了统一的HtmlElement来概括各种Html元素的同时,提供了这两个方 法以调用元素特有的功能。关于各种Html元素的属性和方法一览,可以查阅MSDN的DHTML Reference。 
    http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

    ※关于表单的提交,的确还有另一种方法就是获取form元素而不是button,并用form元素的submit方法:

    1. <div style="border: 0.5pt solid windowtext; padding: 4px 5.4pt; background: rgb(230, 230, 230) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 95%;"><div><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"><span style="color: rgb(0, 0, 0);">HtmlElement formLogin </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> webBrowser.Document.Forms[</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">loginForm</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">];  <br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"></span><span style="color: rgb(0, 128, 0);">//</span><span style="color: rgb(0, 128, 0);">……  </span><span style="color: rgb(0, 128, 0);"><br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"></span><span style="color: rgb(0, 0, 0);">formLogin.InvokeMember(</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">submit</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">);</span></div></div><br>  
    HtmlElement formLogin = webBrowser.Document.Forms["loginForm"];  
    //……  
    formLogin.InvokeMember("submit");


    本文之所以没有推荐这种方法,是因为现在的网页,很多都在submit按钮上添加onclick事件,以对提交的内容做最基本的验证。如果直接使用form的submit方法,这些验证代码就得不到执行,有可能会引起错误。 


    Study Case 3:查找并选择文本

    这次我们希望实现一个和IE一模一样的查找功能,以对Web页面内的文字进行查找。 

    文本查找要借助于TextRange对象的findText方法。但是,.Net里并没有这个对象。这是因为,.Net 2.0提供的HtmlDocument,HtmlWindow,HtmlElement 等类,只不过是对原有mshtml这个COM组件的不完整封装,只提供了mshtml的部分功能。所以许多时候,我们仍旧要借助mshtml来实现我们需 要的功能。好在这些.Net类都提供了DomDocument这个属性,使得我们很容易把.Net对象转换为COM对象使用。下面的代码演示了如何查找 Web页面的文本。 
    (需要添加mshtml的引用,并加上using mshtml;)

    public partial class SearchDemo : Form
    {
        
    // 建立一个查找用的TextRange(IHTMLTxtRange接口) 
        private IHTMLTxtRange searchRange = null;
        
    public SearchDemo()
        
    {
            InitializeComponent();
        }


        
    private void btnSearch_Click(object sender, EventArgs e)
        
    {
            
    // Document的DomDocument属性,就是该对象内部的COM对象。 
            IHTMLDocument2 document = (IHTMLDocument2) webBrowser.Document.DomDocument;
            
    string keyword = txtKeyword.Text.Trim();
            
    if (keyword == "")
                
    return;

            
    // IE的查找逻辑就是,如果有选区,就从当前选区开头+1字符处开始查找;没有的话就从页面最初开始查找。 
            
    // 这个逻辑其实是有点不大恰当的,我们这里不用管,和IE一致即可。 
            if (document.selection.type.ToLower() != "none")
            
    {
                searchRange 
    = (IHTMLTxtRange) document.selection.createRange();
                searchRange.collapse(
    true);
                searchRange.moveStart(
    "character"1);
            }

            
    else
            
    {
                IHTMLBodyElement body 
    = (IHTMLBodyElement) document.body;
                searchRange 
    = (IHTMLTxtRange) body.createTextRange();
            }


            
    // 如果找到了,就选取(高亮显示)该关键字;否则弹出消息。 
            if (searchRange.findText(keyword, 10))
            
    {
                searchRange.select();
            }

            
    else
            
    {
                MessageBox.Show(
    "已搜索到文档结尾。");
            }

        }

    }




    到此为止,简单的查找就搞定了。至于替换功能,看了下一个例子,我相信你就可以触类旁通轻松搞定了。 


    Study Case 4:高亮显示

    上一个例子中我们学会了查找文本——究跟到底,对Web页面还是只读不写。那么,如果说要把所有的搜索结果高亮显示呢?我们很快会想到把所有匹配的文字颜色、背景改一下就可以了。 

    首 先想到的可能是直接修改HTML文本吧……但是,与SourceCode的高亮显示不同,我们需要并且只需要高亮页面中的文本部分。HTML标签、脚本代 码等等是绝对不应该去改动的。因此我们不能把整个页面的Source Code读进来然后replace,那样有破坏HTML文件结构的可能;我们只能在 能够分离出文本与其他内容(标签,脚本……)的前提下进行。 

    具体方法有很多,下面提供两个比较简单的方法。 

    方法一:使用TextRange(IHTMLTxtRange) 

    有了上一个Case的基础,相信大家立刻会想到使用TextRange。没错,TextRange除了提供查找方法之外,还提供了一个pasteHTML方法,以指定的HTML文本替换当前TextRange中的内容。代码片断如下:

    public partial class HilightDemo : Form
    {
        
    // 定义高亮显示效果的标签。 
        string tagBefore = "<span style='background-color:yellow;color:black'>";
        
    string tagAfter = "</span>";

        
    // …… 

        
    private void btnHilight_Click(object sender, EventArgs e)
        
    {
            HtmlDocument htmlDoc 
    = webBrowser.Document;
            
    string keyword = txtKeyword.Text.Trim();
            
    if (keyword == "")
                
    return;

            
    object oTextRange = htmlDoc.Body.InvokeMember("createTextRange");

            mshtml.IHTMLTxtRange txtrange 
    = oTextRange as mshtml.IHTMLTxtRange;

            
    while (txtrange.findText(keyword, 14))
            
    {
                
    try
                
    {
                    txtrange.pasteHTML(tagBefore 
    + keyword + tagAfter);
                }

                
    catch { }
                txtrange.collapse(
    false);
            }

        }

    }




    ※这段代码里获取IHTMLTxtRange的方式和上面的例子稍稍不同,其实所谓条条大路通罗马,本质是一样的。 


    方法二:使用DOM(文档对象模型) 

    将HTML文档解析为DOM,然后遍历每个节点,在其中搜索关键字并进行相应替换处理即可。

    public partial class HilightDemo : Form
    {
        
    //…… 

        
    private void btnHilight_Click(object sender, EventArgs e)
        
    {
            HTMLDocument document 
    = (HTMLDocument) webBrowser.Document.DomDocument;
            IHTMLDOMNode bodyNode 
    = (IHTMLDOMNode) webBrowser.Document.Body.DomElement;
            
    string keyword = txtKeyword.Text.Trim();
            
    if (keyword == "")
                
    return;

            HilightText(document, bodyNode, keyword);
        }


        
    private void HilightText(HTMLDocument document, IHTMLDOMNode node, string keyword)
        
    {
            
    // nodeType = 3:text节点 
            if (node.nodeType == 3)
            
    {
                
    string nodeText = node.nodeValue.ToString();
                
    // 如果找到了关键字 
                if (nodeText.Contains(keyword))
                
    {
                    IHTMLDOMNode parentNode 
    = node.parentNode;
                    
    // 将关键字作为分隔符,将文本分离,并逐个添加到原text节点的父节点 
                    string[] result = nodeText.Split(new string[] { keyword }, StringSplitOptions.None);
                    
    for (int i = 0; i < result.Length - 1; i++)
                    
    {
                        
    if (result[i] != "")
                        
    {
                            IHTMLDOMNode txtNode 
    = document.createTextNode(result[i]);
                            parentNode.insertBefore(txtNode, node);
                        }

                        IHTMLDOMNode orgNode 
    = document.createTextNode(keyword);
                        IHTMLDOMNode hilightedNode 
    = (IHTMLDOMNode) document.createElement("SPAN");
                        IHTMLStyle style 
    = ((IHTMLElement) hilightedNode).style;
                        style.color 
    = "black";
                        style.backgroundColor 
    = "yellow";
                        hilightedNode.appendChild(orgNode);

                        parentNode.insertBefore(hilightedNode, node);
                    }

                    
    if (result[result.Length - 1!= "")
                    
    {
                        IHTMLDOMNode postNode 
    = document.createTextNode(result[result.Length - 1]);
                        parentNode.insertBefore(postNode, node);
                    }

                    parentNode.removeChild(node);
                }
     // End of nodeText.Contains(keyword) 
            }

            
    else
            
    {
                
    // 如果不是text节点,则递归搜索其子节点 
                IHTMLDOMChildrenCollection childNodes = node.childNodes as IHTMLDOMChildrenCollection;
                
    foreach (IHTMLDOMNode n in childNodes)
                
    {
                    HilightText(document, n, keyword);
                }

            }

        }

    }




    上面的两段代码都是为了清晰易懂而精简得不能再简的,有很多地方很不完善。比如,没考虑到如何从高亮显示状态复原;也没有大小写匹配等等。当然,掌握了原理之后相信这些都不会太难。 

    这两种方法各有优缺点: 
    使用TextRange较轻量迅速,而且有一个特长,就是可以把跨标签(Tag)的关键字挑出来。例如,有这么一段HTML:

    1. <strong class="t"><</strong><strong class="e">b</strong><strong class="t">></strong>Hel<strong class="t"></</strong><strong class="e">b</strong><strong class="t">></strong>lo World!  


    先不管作者出于什么目的让Hel三个字母成为粗体,总之显示在页面上的是一句“Hello World!”。在我们希望高亮页面中的 “Hello”这个关键字时,如果用DOM分析的话,会得出含有“Hel”的<b>节点和文本节点“lo World!”两个节点,因此无法 将其挑出来。而TextRange则能正确识别,将其设置为高亮。因此也可以说TextRange是只和文本有关,和HTML语法结构无关的对象。 

    但是,TextRange也有其致命缺点,加亮容易,反向的话就很难。换句话说,去除高亮显示的时候不能再用TextRange,而需要采用其他方法。 

    而DOM方法则正好相反, 由于DOM的树状结构特性,虽然不能(或者很难)跨越Tag搜索关键字,但是去除高亮显示并不繁琐。


    Study Case 5:与脚本的互操作 

    在 Case 1当中,我们已经看到,Web页面的HTML元素的事件,可以由Windows Form端来响应,可以在某种程度上看作是Web页面调用 WinForm;那么反过来,WinForm除了可以直接访问Web页面的HTML元素之外,能否调用Web页面里的各种Script呢?

    首先是调用Web页面的脚本中已经定义好的函数。假设HTML中有如下Javascript:

    1. <strong class="k">function</strong> DoAdd(a, b) {<br>    <strong class="k">return</strong> a + b;<br>}  


    那么,我们要在WinForm调用它,只需如下代码即可:

    1. <strong class="k">object</strong> oSum = webBrowser.Document.InvokeScript(<strong class="s">"DoAdd"</strong>, <strong class="k">new</strong> <strong class="k">object</strong>[] { 1, 2 });<br><strong class="k">int</strong> sum = Convert.ToInt32(oSum);  
    object oSum = webBrowser.Document.InvokeScript("DoAdd", new object[] { 1, 2 });
    int sum = Convert.ToInt32(oSum);


    其次,如果我们想执行一段Web页面中原本没有的脚本,该怎么做呢?这次.Net的类没有提供,看来还要依靠COM了。IHTMLWindow2可以将任意的字符串作为脚本代码来执行。

    1. <strong class="k"><div style="border: 0.5pt solid windowtext; padding: 4px 5.4pt; background: rgb(230, 230, 230) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 95%;"><div><strong><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"><span style="color: rgb(0, 0, 255);">string</span><span style="color: rgb(0, 0, 0);"> scriptline01 </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">@"</span><span style="color: rgb(0, 0, 0);">function ShowPageInfo() {</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">;<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"></span><span style="color: rgb(0, 0, 255);">string</span><span style="color: rgb(0, 0, 0);"> scriptline02 </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">@"</span><span style="color: rgb(0, 0, 0);">     var numLinks = document.links.length; </span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">;<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"></span><span style="color: rgb(0, 0, 255);">string</span><span style="color: rgb(0, 0, 0);"> scriptline03 </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">@"</span><span style="color: rgb(0, 0, 0);">     var numForms = document.forms.length; </span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">;<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"></span><span style="color: rgb(0, 0, 255);">string</span><span style="color: rgb(0, 0, 0);"> scriptline04 </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">@"</span><span style="color: rgb(0, 0, 0);">     var numImages = document.images.length; </span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">;<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"></span><span style="color: rgb(0, 0, 255);">string</span><span style="color: rgb(0, 0, 0);"> scriptline05 </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">@"</span><span style="color: rgb(0, 0, 0);">     var numScripts = document.scripts.length; </span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">;<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"></span><span style="color: rgb(0, 0, 255);">string</span><span style="color: rgb(0, 0, 0);"> scriptline06 </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">@"</span><span style="color: rgb(0, 0, 0);">     alert('网页的统计结果: 链接数:' + numLinks + </span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">;<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"></span><span style="color: rgb(0, 0, 255);">string</span><span style="color: rgb(0, 0, 0);"> scriptline07 </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">@"</span><span style="color: rgb(0, 0, 0);">        ' 表单数:' + numForms + </span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">;<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"></span><span style="color: rgb(0, 0, 255);">string</span><span style="color: rgb(0, 0, 0);"> scriptline08 </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">@"</span><span style="color: rgb(0, 0, 0);">        ' 图像数:' + numImages + </span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">;<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"></span><span style="color: rgb(0, 0, 255);">string</span><span style="color: rgb(0, 0, 0);"> scriptline09 </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">@"</span><span style="color: rgb(0, 0, 0);">        ' 脚本数:' + numScripts);}</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">;<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"></span><span style="color: rgb(0, 0, 255);">string</span><span style="color: rgb(0, 0, 0);"> scriptline10 </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">@"</span><span style="color: rgb(0, 0, 0);">ShowPageInfo();</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">;<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"><br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"></span><span style="color: rgb(0, 0, 255);">string</span><span style="color: rgb(0, 0, 0);"> strScript </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> scriptline01 </span><span style="color: rgb(0, 0, 0);">+</span><span style="color: rgb(0, 0, 0);"> scriptline02 </span><span style="color: rgb(0, 0, 0);">+</span><span style="color: rgb(0, 0, 0);"> scriptline03 </span><span style="color: rgb(0, 0, 0);">+</span><span style="color: rgb(0, 0, 0);"> scriptline04 </span><span style="color: rgb(0, 0, 0);">+</span><span style="color: rgb(0, 0, 0);"> scriptline05 </span><span style="color: rgb(0, 0, 0);">+</span><span style="color: rgb(0, 0, 0);"><br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top">                   scriptline06 </span><span style="color: rgb(0, 0, 0);">+</span><span style="color: rgb(0, 0, 0);"> scriptline07 </span><span style="color: rgb(0, 0, 0);">+</span><span style="color: rgb(0, 0, 0);"> scriptline08 </span><span style="color: rgb(0, 0, 0);">+</span><span style="color: rgb(0, 0, 0);"> scriptline09 </span><span style="color: rgb(0, 0, 0);">+</span><span style="color: rgb(0, 0, 0);"> scriptline10;<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top"><br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top">IHTMLWindow2 win </span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> (IHTMLWindow2)webBrowser.Document.Window.DomWindow;<br><img src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" alt="" align="top">win.execScript(strScript, </span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">Javascript</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">);</span></strong></div></div><br></strong>  
    string scriptline01 = @"function ShowPageInfo() {";
    string scriptline02 = @"     var numLinks = document.links.length; ";
    string scriptline03 = @"     var numForms = document.forms.length; ";
    string scriptline04 = @"     var numImages = document.images.length; ";
    string scriptline05 = @"     var numScripts = document.scripts.length; ";
    string scriptline06 = @"     alert('网页的统计结果: 链接数:' + numLinks + ";
    string scriptline07 = @"        ' 表单数:' + numForms + ";
    string scriptline08 = @"        ' 图像数:' + numImages + ";
    string scriptline09 = @"        ' 脚本数:' + numScripts);}";
    string scriptline10 = @"ShowPageInfo();";

    string strScript = scriptline01 + scriptline02 + scriptline03 + scriptline04 + scriptline05 +
                       scriptline06 
    + scriptline07 + scriptline08 + scriptline09 + scriptline10;

    IHTMLWindow2 win 
    = (IHTMLWindow2)webBrowser.Document.Window.DomWindow;
    win.execScript(strScript, 
    "Javascript");

     

    展开全文
  • 近看到博客园入门教学文章比较流行,自己最近又偷懒比较多,没啥心得,不妨写一篇没啥深度的入门文章吧。...那么,无论我们是想做一个“定制版IE”,还是希望利用HTML来做用户界面(指WinApp而非Web
    近看到博客园入门教学文章比较流行,自己最近又偷懒比较多,没啥心得,不妨写一篇没啥深度的入门文章吧。
    

    话说有了WebBrowser类,终于不用自己手动封装SHDocVw的AxWebBrowser这个ActiveX控件了。这个类如果仅仅作为一个和IE一模一样浏览器,那就太没意思了(还不如直接用IE呢)。那么,无论我们是想做一个“定制版IE”,还是希望利用HTML来做用户界面(指WinApp而非WebApp。许多单机软件,包括Windows的帮助支持中心,都是HTML做的),都少不了Windows Form和包含在WebBrowser中的Web页面的交互。本文将通过几个实际的例子,初步介绍一下WinForm和WebBrowser所包含的Web页面之间的交互。

    下面的代码假设你已经建立了一个Windows Form,上面有一个WebBrowser名为“webBrowser”。

    Study Case 1:用WinForm的Event Handler响应Web页面的事件

    现在有这样一个Windows Application,它的界面上只有一个WebBrowser,显示一个本地的HTML文件作为界面。现在的问题是,所有逻辑都可以放在HTML文件里,唯独“关闭”按钮遇到了困难——通常,Web页面是没有办法直接控制浏览器的,更不用说结束这个WinForm程序了。

    但是,在.Net 2.0当中,“由Windows Form响应Web页面的事件”已经成为了现实。

    在.Net 2.0中,整个HTML文档以及其包含的各个HTML元素,都和一个个HtmlDocument、HtmlElement之类的.Net对象对应。因此只要找到这个“关闭”按钮对应的HtmlElement对象,为其click事件添加Event Handler即可。

    假设HTML源代码如下:

    <html>
    <body>

    <input type="button" id="btnClose" value="关闭" />

    </body>

    </html>

    那么找出该按钮并为之添加Event Handler的代码如下:

     

    HtmlDocument htmlDoc = webBrowser.Document;
    HtmlElement btnElement 
    = htmlDoc.All["btnClose"
    ];
    if (btnElement != null
    )
    {
        btnElement.click 
    += new
     HtmlElementEventHandler(HtmlBtnClose_Click);
    }

    其中HtmlBtnClose_Click是按下Web按钮时的Event Handler。

    很简单吧?那么稍稍高级一点的——我们都知道一个HTML元素可能有很多各种各样的事件,而HtmlElement这个类只给出最常用、共通的几个。那么,如何响应其他事件呢?这也很简单,只需要调用HtmlElement的AttachEventHandler就可以了:

    btnElement.AttachEventHandler("onclick"new EventHandler(HtmlBtnClose_Click)); 
    //这一句等价于上面的btnElement.click += new HtmlElementEventHandler(HtmlBtnClose_Click); 

    对于其他事件,把"onclick"换成该事件的名字就可以了。例如:

    formElement.AttachEventHandler("onsubmit"new EventHandler(HtmlForm_Submit)); 


    Study Case 2:表单(form)的自动填写和提交

    要使我们的WebBrowser具有自动填表、甚至自动提交的功能,并不困难。

    假设有一个最简单的登录页面,输入用户名密码,点“登录”按钮即可登录。已知用户名输入框的id(或Name,下同)是username,密码输入框的id是password,“登录”按钮的id是submitbutton,那么我们只需要在webBrowser的DocumentCompleted事件中使用下面的代码即可:

    HtmlElement btnSubmit = webBrowser.Document.All["submitbutton"];
    HtmlElement tbUserid 
    = webBrowser.Document.All["username"
    ];
    HtmlElement tbPasswd 
    = webBrowser.Document.All["password"
    ];

    if (tbUserid == null || tbPasswd == null || btnSubmit == null
    )
        
    return
    ;

    tbUserid.SetAttribute(
    "value""smalldust"
    );
    tbPasswd.SetAttribute(
    "value""12345678"
    );

    btnSubmit.InvokeMember(
    "click");

    这里我们用SetAttribute来设置文本框的“value”属性,用InvokeMember来调用了按钮的“click”方法。因为不同的Html元素,其拥有的属性和方法也不尽相同,所以.Net 2.0提供了统一的HtmlElement来概括各种Html元素的同时,提供了这两个方法以调用元素特有的功能。关于各种Html元素的属性和方法一览,可以查阅MSDN的DHTML Reference

    ※关于表单的提交,的确还有另一种方法就是获取form元素而不是button,并用form元素的submit方法:

    HtmlElement formLogin = webBrowser.Document.Forms["loginForm"]; 
    //…… 

    formLogin.InvokeMember("submit"); 

    本文之所以没有推荐这种方法,是因为现在的网页,很多都在submit按钮上添加onclick事件,以对提交的内容做最基本的验证。如果直接使用form的submit方法,这些验证代码就得不到执行,有可能会引起错误。


    Study Case 3:查找并选择文本

    这次我们希望实现一个和IE一模一样的查找功能,以对Web页面内的文字进行查找。

    文本查找要借助于TextRange对象的findText方法。但是,.Net里并没有这个对象。这是因为,.Net 2.0提供的HtmlDocument,HtmlWindow,HtmlElement等类,只不过是对原有mshtml这个COM组件的不完整封装,只提供了mshtml的部分功能。所以许多时候,我们仍旧要借助mshtml来实现我们需要的功能。好在这些.Net类都提供了DomDocument这个属性,使得我们很容易把.Net对象转换为COM对象使用。下面的代码演示了如何查找Web页面的文本。
    (需要添加mshtml的引用,并加上using mshtml;)

     

        public partial class SearchDemo : Form
        {
            
    // 建立一个查找用的TextRange(IHTMLTxtRange接口) 

            private IHTMLTxtRange searchRange = null;
            
    public
     SearchDemo()
            {
                InitializeComponent();
            }

            
    private void btnSearch_Click(object
     sender, EventArgs e)
            {
                
    // Document的DomDocument属性,就是该对象内部的COM对象。 

                IHTMLDocument2 document = (IHTMLDocument2)webBrowser.Document.DomDocument;
                
    string keyword =
     txtKeyword.Text.Trim();
                
    if (keyword == ""
    )
                    
    return
    ;

                
    //
     IE的查找逻辑就是,如果有选区,就从当前选区开头+1字符处开始查找;没有的话就从页面最初开始查找。 
                
    // 这个逻辑其实是有点不大恰当的,我们这里不用管,和IE一致即可。 

                if (document.selection.type.ToLower() != "none")
                {
                    searchRange 
    =
     (IHTMLTxtRange)document.selection.createRange();
                    searchRange.collapse(
    true
    );
                    searchRange.moveStart(
    "character"1
    );
                }
                
    else

                {
                    IHTMLBodyElement body 
    = (IHTMLBodyElement)document.body;
                    searchRange 
    =
     (IHTMLTxtRange)body.createTextRange();
                }

                
    // 如果找到了,就选取(高亮显示)该关键字;否则弹出消息。 

                if (searchRange.findText(keyword, 10))
                {
                    searchRange.select();
                }
                
    else

                {
                    MessageBox.Show(
    "已搜索到文档结尾。");
                }
            }
        } 

    到此为止,简单的查找就搞定了。至于替换功能,看了下一个例子,我相信你就可以触类旁通轻松搞定了。

    Study Case 4:高亮显示

    上一个例子中我们学会了查找文本——究跟到底,对Web页面还是只读不写。那么,如果说要把所有的搜索结果高亮显示呢?我们很快会想到把所有匹配的文字颜色、背景改一下就可以了。

    首先想到的可能是直接修改HTML文本吧……但是,与SourceCode的高亮显示不同,我们需要并且只需要高亮页面中的文本部分。HTML标签、脚本代码等等是绝对不应该去改动的。因此我们不能把整个页面的Source Code读进来然后replace,那样有破坏HTML文件结构的可能;我们只能在能够分离出文本与其他内容(标签,脚本……)的前提下进行。

    具体方法有很多,下面提供两个比较简单的方法。

    方法一:使用TextRange(IHTMLTxtRange)
    有了上一个Case的基础,相信大家立刻会想到使用TextRange。没错,TextRange除了提供查找方法之外,还提供了一个pasteHTML方法,以指定的HTML文本替换当前TextRange中的内容。代码片断如下:

        public partial class HilightDemo : Form
        {
            
    // 定义高亮显示效果的标签。

            string tagBefore = "<span style='background-color:yellow;color:black'>"
    ;
            
    string tagAfter = "</span>"
    ;

            
    // ……


            
    private void btnHilight_Click(object sender, EventArgs e)
            {
                HtmlDocument htmlDoc 
    =
     webBrowser.Document;
                
    string keyword =
     txtKeyword.Text.Trim();
                if (keyword == "")
                    return;

                
    object oTextRange = htmlDoc.Body.InvokeMember("createTextRange"
    );

                mshtml.IHTMLTxtRange txtrange 
    = oTextRange as
     mshtml.IHTMLTxtRange;

                
    while (txtrange.findText(keyword, 14
    ))
                {
                    
    try

                    {
                        txtrange.pasteHTML(tagBefore 
    + keyword +
     tagAfter);
                    }
                    
    catch
     { }
                    txtrange.collapse(
    false
    );
                }
            }
        }


    ※这段代码里获取IHTMLTxtRange的方式和上面的例子稍稍不同,其实所谓条条大路通罗马,本质是一样的。

    方法二:使用DOM(文档对象模型)
    将HTML文档解析为DOM,然后遍历每个节点,在其中搜索关键字并进行相应替换处理即可。

        public partial class HilightDemo : Form
        {
            
    //……


            
    private void btnHilight_Click(object sender, EventArgs e)
            {
                HTMLDocument document 
    =
     (HTMLDocument)webBrowser.Document.DomDocument;
                IHTMLDOMNode bodyNode 
    =
     (IHTMLDOMNode)webBrowser.Document.Body.DomElement;
                
    string keyword =
     txtKeyword.Text.Trim();
                
    if (keyword == ""
    )
                    
    return
    ;

                HilightText(document, bodyNode, keyword);
            }

            
    private void HilightText(HTMLDocument document, IHTMLDOMNode node, string
     keyword)
            {
                
    // nodeType = 3:text节点

                if (node.nodeType == 3
    )
                {
                    
    string nodeText =
     node.nodeValue.ToString();
                    
    // 如果找到了关键字

                    if
     (nodeText.Contains(keyword))
                    {
                        IHTMLDOMNode parentNode 
    =
     node.parentNode;
                        
    // 将关键字作为分隔符,将文本分离,并逐个添加到原text节点的父节点

                        string[] result = nodeText.Split(new string
    [] { keyword }, StringSplitOptions.None);
                        
    for (int i = 0; i < result.Length - 1; i++
    )
                        {
                            
    if (result[i] != ""
    )
                            {
                                IHTMLDOMNode txtNode 
    =
     document.createTextNode(result[i]);
                                parentNode.insertBefore(txtNode, node);
                            }
                            IHTMLDOMNode orgNode 
    =
     document.createTextNode(keyword);
                            IHTMLDOMNode hilightedNode 
    = (IHTMLDOMNode)document.createElement("SPAN"
    );
                            IHTMLStyle style 
    =
     ((IHTMLElement)hilightedNode).style;
                            style.color 
    = "black"
    ;
                            style.backgroundColor 
    = "yellow"
    ;
                            hilightedNode.appendChild(orgNode);

                            parentNode.insertBefore(hilightedNode, node);
                        }
                        
    if (result[result.Length - 1!= ""
    )
                        {
                                IHTMLDOMNode postNode 
    = document.createTextNode(result[result.Length - 1
    ]);
                                parentNode.insertBefore(postNode, node);
                        }
                        parentNode.removeChild(node);
                    } 
    // End of nodeText.Contains(keyword)

                }
                
    else

                {
                    
    // 如果不是text节点,则递归搜索其子节点

                    IHTMLDOMChildrenCollection childNodes = node.childNodes as
     IHTMLDOMChildrenCollection;
                    
    foreach (IHTMLDOMNode n in
     childNodes)
                    {
                        HilightText(document, n, keyword);
                    }
                }
            }
        }

    上面的两段代码都是为了清晰易懂而精简得不能再简的,有很多地方很不完善。比如,没考虑到如何从高亮显示状态复原;也没有大小写匹配等等。当然,掌握了原理之后相信这些都不会太难。

    这两种方法各有优缺点:
    使用TextRange较轻量迅速,而且有一个特长,就是可以把跨标签(Tag)的关键字挑出来。例如,有这么一段HTML:

    <b>Hel</b>lo World!

    先不管作者出于什么目的让Hel三个字母成为粗体,总之显示在页面上的是一句“Hello World!”。在我们希望高亮页面中的“Hello”这个关键字时,如果用DOM分析的话,会得出含有“Hel”的<b>节点和文本节点“lo World!”两个节点,因此无法将其挑出来。而TextRange则能正确识别,将其设置为高亮。因此也可以说TextRange是只和文本有关,和HTML语法结构无关的对象。

    但是,TextRange也有其致命缺点,加亮容易,反向的话就很难。换句话说,去除高亮显示的时候不能再用TextRange,而需要采用其他方法。

    而DOM方法则正好相反, 由于DOM的树状结构特性,虽然不能(或者很难)跨越Tag搜索关键字,但是去除高亮显示并不繁琐。

    Study Case 5:与脚本的互操作

    在Case 1当中,我们已经看到,Web页面的HTML元素的事件,可以由Windows Form端来响应,可以在某种程度上看作是Web页面调用WinForm;那么反过来,WinForm除了可以直接访问Web页面的HTML元素之外,能否调用Web页面里的各种Script呢?

    首先是调用Web页面的脚本中已经定义好的函数。假设HTML中有如下Javascript:

    function DoAdd(a, b) {
        
    return a +
     b;
    }

    那么,我们要在WinForm调用它,只需如下代码即可:

    object oSum = webBrowser.Document.InvokeScript("DoAdd"new object[] { 12 });
    int sum = Convert.ToInt32(oSum);

    其次,如果我们想执行一段Web页面中原本没有的脚本,该怎么做呢?这次.Net的类没有提供,看来还要依靠COM了。IHTMLWindow2可以将任意的字符串作为脚本代码来执行。

    string scriptline01 = @"function ShowPageInfo() {";
    string scriptline02 = @"     var numLinks = document.links.length; "
    ;
    string scriptline03 = @"     var numForms = document.forms.length; "
    ;
    string scriptline04 = @"     var numImages = document.images.length; "
    ;
    string scriptline05 = @"     var numScripts = document.scripts.length; "
    ;
    string scriptline06 = @"     alert('网页的统计结果:/r/n链接数:' + numLinks + "
    ;
    string scriptline07 = @"        '/r/n表单数:' + numForms + "
    ;
    string scriptline08 = @"        '/r/n图像数:' + numImages + "
    ;
    string scriptline09 = @"        '/r/n脚本数:' + numScripts);}"
    ;
    string scriptline10 = @"ShowPageInfo();"
    ;

    string strScript = scriptline01 + scriptline02 + scriptline03 + scriptline04 + scriptline05 +

                       scriptline06 
    + scriptline07 + scriptline08 + scriptline09 + scriptline10;

    IHTMLWindow2 win 
    =
     (IHTMLWindow2)webBrowser.Document.Window.DomWindow;
    win.execScript(strScript, 
    "Javascript");

     

     

    http://smalldust.cnblogs.com/archive/2006/03/08/345561.html

    展开全文
  • WEB应用测试技巧

    千次阅读 2018-05-23 23:03:43
    WEB应用测试技巧 1 静态页面 31.1 静态文字 31.2 图片 31.3 链接 31.4 页面显示 32 逻辑测试 42.1 表单元素 42.1.1 按钮 42.1.2 单行文本框 42.1.3 多行文本框 52.1.4 单选框/复选框/下拉选框 52.1.5 翻页 62.1.6 ...
  • Web数据交互-XML/JAVASCRIPT

    千次阅读 2006-05-09 10:15:00
    前面的两种方式都能传递数据,但是都有一个问题,就是提交数据后,页面会刷新,由于web是无状态的,所以我们必须通过代码来维持页面上的状态。(在asp.net里面微软通过ViewState来维护)所以我们要做到交互数据但是...
  • 摘要摘要: 介绍通过Web服务器实现数据库动态数据交互的几种方法及其对比,着重以实例说明如何实现和DBASE x和ORACLE数据库的交互操作。摘要:Web, CGI,ISAPI,ASP 1 概述Web技术是一项很新的技术,它不仅为...
  • 3.XML方式 前面的两种方式都能传递数据,但是都有一个问题,就是提交数据后,页面会刷新,由于web是无状态的,所以我们必须通过代码来维持页面上的状态。(在asp.net里面微软通过ViewState来维护)所以我们要做到...
  • WKWebView与JS交互实战技巧之API介绍

    万次阅读 2016-04-30 12:38:28
    前言前一章我给大家介绍了iOS与HTML5的交互,用的是UIWebView,今天给大家介绍另外一种基于 iOS 8 新推出的 WKWebView 组件,构建出自己的混合开发框架。WKWebView 简介WKWebView 是苹果在 iOS 8 中引入的新组件,目的...
  • web前端页面优化详解

    千次阅读 2019-03-08 21:16:43
    1.web页面的具体是什么?前身? web前端页面作为呈现给用户看的页面,也就是浏览器可以解析出资源的通过一定程序而出现的页面,对于可以开发人员,很好懂:就是HTML(Hyper Text Markup Language【超文本标记语言】...
  • Web前端开发 HTML设计 经验与技巧总结

    万次阅读 多人点赞 2020-01-19 13:09:33
    Web前端开发是是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互,有一些常用的方法和技巧,包括限制input输入框...
  • WKWebView与JS交互之实战技巧介绍

    万次阅读 2016-04-30 18:34:00
    #配置Js与Web内容交互 WKUserContentController是用于给JS注入对象的,注入对象后,JS端就可以使用: window.webkit.messageHandlers.<name>.postMessage() 来调用发送数据给iOS端,比如: window.webkit....
  • PB11.5 WEB客户端编程技巧总结

    千次阅读 2011-08-25 22:52:20
    PB11.5 WEB客户端编程技巧总结 一、概述 用PB11.5把现有C/S程序转换成WEB应用程序后,保留了大部分C/S环境下的代码,并且大部分都能执行过去。但是在BS平台下,原来的PB代码从客户端转成了IIS上的服务代码,原的...
  • WEB:python CGI 交互式界面实现

    千次阅读 2017-07-18 21:59:37
    7月第3周博客, 最近在做一个项目,里面用到了网站的开发,而CGI作为网页开发的基础,要有有一个...下面贴出网页交互的全部代码,最后再给大家足部的见解:#!/usr/bin/env pythonfrom cgi import FieldStorage from os
  • WEB前端开发技巧与注意事项

    千次阅读 2016-09-13 16:45:59
    web移动端开发技巧与注意事项汇总 一、meta的使用 1、  强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览 2、winphone系统a、input标签被点
  • 移动平台WEB前端开发技巧汇总

    万次阅读 2012-01-06 11:35:53
    您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相关的文章,您或许是一名专业的WEB前端工程师,您或许想学习Mobile前端开发方面的技术,如果您被我说中了,呵呵那么这篇文章将为您...
  • Web Applications 开发技巧(一)

    千次阅读 2012-06-28 15:17:49
    作为一名前端er,从事SmartPhone开发已经快一年,走了不少弯路,也馋到了不少甜头,特别在2010年人们还没怎么关注Web App的时候,我们已经开始研发一款HTML5游戏,中间的曲折,使得我有必要把自己总结的一些想法分享...
  • Web 应用程序设计交互式错误处理

    千次阅读 2009-01-15 10:32:00
    用户与 Web 应用程序交互时,总是不可避免地会发生错误。您的应用程序必须确保所输入的数据是有效的,如果不是,应用程序必须明确地告诉用户数据无效的原因,并使用户能够轻松修正问题。同时利用客户端和服务器端...
  • 随着企业intranet和国际internet的迅速发展,越来越多的工作流程,商务交易,教育、培训、会议和讲座,以及个人消费娱乐都被转移到所谓的万维网(World Wide Web,以下简称WEB)上来了。与此相对应的是交互操作的...
  • 服务器优化web性能技巧总结

    千次阅读 2018-07-29 16:07:41
    提高 web 应用的性能从来没有比现在更重要过。网络经济的比重一直在增长;全球经济超过 5% 的价值是在因特网上产生的(数据参见下面的资料)。这个时刻在线的超连接世界意味着用户对其的期望值也处于历史上的最高点...
  • Web页面中经常需要实现如图5-2所示的级联菜单的效果。即根据用户的选择,动态展开并显示出对应选项子菜单中的内容。本例中是根据用户所选择的商品类别信息,在子菜单中显示对应的商品名称。图5-2 级联菜单的效果...
  • ASP技巧WEB打印代码大全

    千次阅读 2008-11-20 16:51:00
    ASP开发必备:WEB打印代码大全 ASP开发必备:WEB打印代码大全这篇文章主要介绍了如何使用ASP控制Web的各种打印效果,它能够控制纵打、横打和页面边距等。 1、控制"纵打"、 "横打"和"页面的边距"。 (1) function ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,464
精华内容 11,785
关键字:

web页面交互技巧