一种实现Web页面显示的方法和系统的制作方法
【专利摘要】本发明公开一种实现Web页面显示的方法和系统，所述方法包括：创建用于将页面元素单独显示的插件，将插件加载到浏览器，在浏览器的菜单中添加功能菜单项或在浏览器的工具栏中添加功能按钮；插件确定功能菜单项或功能按钮被选中后，在浏览器显示的页面中捕捉鼠标的停留操作；搜索页面的元素结构数据确定鼠标停留位置处的页面元素，通过边框将确定的鼠标停留位置处的页面元素框出，获取所述页面元素的内容；插件创建新页面元素，设置新页面元素的页面尺寸，将鼠标停留位置处的页面元素的内容赋值给所述新页面元素，在浏览器的页面中显示所述新页面元素。本发明能够解决Web网页中核心内容区域与其他无关内容混杂在一起无法突出显示的问题。
【专利说明】 一种实现Web页面显不的方法和系统
【技术领域】
[0001]本发明涉及计算机网络领域，特别涉及一种实现Web页面显示的方法和系统。
【背景技术】
[0002]随着互联网系统的高速发展，Web页面成为互联网最广泛的服务载体。现有技术中，Web页面可以包含多个页面元素,在一个Web页面中能够提供多种信息。例如,现有Web页面中可以同时提供多个文本信息，动画信息、视频\音频信息。
[0003]在Web页面中信息量增多的同时，使得一些与核心内容无关的信息占用了大量的显示区域。而核心内容为用户主要阅读内容，由于核心内容与其他无关内容混杂在一起，造成用户的阅读不便。特别是，在核心内容区域较小时，由于无法对核心内容区域进行放大，使得用户难以阅读。
【发明内容】
[0004]本发明提供了一种实现Web页面显示的方法和系统，以解决Web网页中核心内容区域与其他无关内容混杂在一起无法突出显示的问题。
[0005]本发明公开了一种实现Web页面显示的方法，所述方法包括:
[0006]创建用于将页面元素单独显示的插件，将插件加载到浏览器，在浏览器的菜单中添加功能菜单项或在浏览器的工具栏中添加功能按钮；
[0007]插件确定功能菜单项或功能按钮被选中后，在浏览器显示的页面中捕捉鼠标的停留操作；
[0008]当捕捉到鼠标停留在页面中时，插件搜索页面的元素结构数据确定鼠标停留位置处的页面元素，通过边框将确定的鼠标停留位置处的页面元素框出，获取所述页面元素的内容；
[0009]插件创建新页面元素，设置新页面元素的页面尺寸，将鼠标停留位置处的页面元素的内容赋值给所述新页面元素，在浏览器的页面中显示所述新页面元素。
[0010]其中，所述插件通过边框将确定的鼠标停留位置处的的页面元素框出后还包括:
[0011]插件在边框内区域中添加显示按钮；
[0012]所述插件获取所述页面元素的内容具体包括:
[0013]插件在确定显示按钮被选中后，获取所述页面元素的内容。
[0014]其中，所述在浏览器的页面中显示所述新页面元素后还包括:
[0015]在显示的新页面元素的页面中添加关闭按钮；
[0016]所述方法还包括:插件在确定关闭按钮被选中后，将新页面元素删除，将浏览器中显示的页面恢复为原页面。
[0017]其中，所述插件创建新页面元素后还包括:
[0018]插件将新页面元素添加到页面的元素结构数据中，
[0019]所述插件将新页面元素删除后还包括:[0020]插件将新页面元素从页面的元素结构数据中移除。
[0021]其中，所述插件设置新页面元素的页面尺寸具体包括:
[0022]插件将新页面元素的页面的宽和高设置为浏览器中整个页面的宽和高。
[0023]本发明还公开了一种实现Web页面显示的系统，所述系统包括:浏览器通信模块和用于将页面元素单独显示的插件模块，
[0024]所述浏览器通信模块，用于接收页面显示命令，以及将页面显示命令传递给浏览器；
[0025]所述插件模块包括:
[0026]所述功能键添加单元，用于在浏览器的菜单中添加功能菜单项或在浏览器的工具栏中添加功能按钮；
[0027]页面元素提取单元，用于确定功能菜单项或功能按钮被选中后，在浏览器显示的页面中捕捉鼠标的停留操作，当捕捉到鼠标停留在页面中时，搜索页面的元素结构数据确定鼠标停留位置处的页面元素，通过边框将确定的鼠标停留位置处的页面元素框出，获取所述页面元素的内容；
[0028]页面元素显示单元，用于创建新页面元素，设置新页面元素的页面尺寸，将鼠标停留位置处的页面元素的内容赋值给所述新页面元素，向浏览器通信模块发送指示浏览器在页面中显示所述新页面元素的页面显示命令。
[0029]其中，所述功能键添加单元还用于:在边框内区域中添加显示按钮；
[0030]所述页面元素提取单元具体用于:在确定显示按钮被选中后，获取页面元素的内容。
[0031]其中，所述功能键添加单元还用于:在显示的新页面元素的页面中添加关闭按钮；
[0032]所述页面元素显示单元还用于:在确定关闭按钮被选中后，将新页面元素删除，向浏览器通信模块发送指示浏览器将显示的页面恢复为原页面的页面显示命令。
[0033]其中，页面元素显示单元还用于:创建新页面元素后，将新页面元素添加到页面的元素结构数据中；在将新页面元素删除后，将新页面元素从页面的元素结构数据中移除。
[0034]其中，页面元素显示单元在设置新页面元素的页面尺寸时具体用于:将新页面元素的页面的宽和高设置为浏览器中整个页面的宽和高。
[0035]本发明的有益效果是:通过创建插件，将插件加载到浏览器，插件在浏览器显示的页面中，依据页面的元素结构数据确定鼠标停留位置处的的页面元素，获取所述页面元素的内容，并且插件创建新页面元素，设置新页面元素的页面尺寸，将鼠标停留位置处的页面元素的内容赋值给所述新页面元素，显示新页面元素；能够从页面中提取页面元素，并按设置的尺寸显示提取的页面元素，从而能够实现将鼠标停留位置处的页面元素的内容与其他无关内容相区分，在浏览器页面中显示该页面元素的内容，方便用户阅读。
【专利附图】
【附图说明】
[0036]图1为本发明实施例一中实现Web页面显示的方法的流程图。
[0037]图2为本发明实施例三中实现Web页面显示的方法的流程图。
[0038]图3为本发明实施例三中在浏览器页面中框出鼠标停留位置处的页面元素的示意图。
[0039]图4为本发明实施例三中在浏览器页面中全屏显示鼠标停留位置处的页面元素的示意图。
[0040]图5为本发明实施例五中实现Web页面显示的系统的结构图。
【具体实施方式】
[0041]为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。
[0042]参见图1，为本发明实施例一中实现Web页面显示的方法的流程图。
[0043]所述方法包括如下步骤。
[0044]步骤S100，创建用于将页面元素单独显示的插件，将插件加载到浏览器，在浏览器的菜单中添加功能菜单项或在浏览器的工具栏中添加功能按钮。
[0045]步骤S200，插件确定功能菜单项或功能按钮被选中后，在浏览器显示的页面中捕捉鼠标的停留操作。
[0046]步骤S300，当捕捉到鼠标停留在页面中时，插件搜索页面的元素结构数据确定鼠标停留位置处的页面元素，通过边框将确定的鼠标停留位置处的页面元素框出，获取所述页面元素的内容。
[0047]步骤S400，插件创建新页面元素，设置新页面元素的页面尺寸，将鼠标停留位置处的页面元素的内容赋值给所述新页面元素，在浏览器的页面中显示所述新页面元素。
[0048]其中，设置新页面元素的页面尺寸可以为需要的任意尺寸，例如可将新页面元素的页面的宽和高设置为浏览器中整个页面的宽和高，以实现全屏显示。这样，通过将页面元素的内容在全屏显示，能够实现对该页面元素的内容区域的放大，便于用户阅读。
[0049]通过添加功能按钮或功能菜单项来对显示页面元素的操作进行控制，能够增加用户操作灵活性。将鼠标停留位置处的的页面元素框出，便于用户确定浏览器的页面中将要显示的区域。
[0050]实施例二
[0051]在实施例二中，除如下特征外，其他特征同其他实施例，在此省略描述。
[0052]所述插件通过边框将确定的鼠标停留位置处的的页面元素框出后还包括:插件在边框内区域中添加显示按钮。
[0053]所述插件获取页面元素的内容具体包括:插件在确定显示按钮被选中后，获取页面元素的内容。
[0054]进一步地，所述在浏览器的页面中显示新页面元素后还包括:在显示的新页面元素的页面中添加关闭按钮。
[0055]所述方法还包括:插件在确定关闭按钮被选中后，将新页面元素删除，将浏览器中显示的页面恢复为原页面。
[0056]进一步地，所述插件创建新页面元素后还可以包括:插件将新页面元素添加到页面的元素结构数据中。
[0057]所述插件将新页面元素删除后还可以包括:插件将新页面元素从页面的元素结构数据中移除。[0058]在实施例二中，通过添加显示按钮和关闭按钮，进一步对显示页面元素的操作进行控制，增加用户操作灵活性。
[0059]实施例三
[0060]参见图2，为本发明实施例三中实现Web页面显示的方法的流程图。
[0061]在实施例三中，从页面中提取鼠标停留位置处的的页面元素，对提取的页面元素进行全屏显示。
[0062]步骤S201，创建用于将页面元素单独显示的插件，将插件加载到浏览器
[0063]采用浏览器插件技术，本实施例中插件为DLL (动态链接库，Dynamic LinkLibrary)文件，浏览器启动时加载该插件，插件加载完成后，该插件可获取页面的DOM(Document Object Model，文档对象模型)数据。DOM数据即为本实施的页面的元素结构数据。
[0064]步骤S202，插件在浏览器的菜单中添加功能菜单项或在浏览器的工具栏中添加功能按钮。
[0065]本实施例中，插件在浏览器的工具栏或者菜单中增加一个功能入口，该功能入口为“部分全屏”按钮或者“部分全屏”菜单项。
[0066]步骤S203，插件确定功能入口被选中后，在浏览器显示的页面中捕捉鼠标的停留操作，当捕捉到鼠标停留在页面中时，搜索页面的元素结构数据确定鼠标停留位置处的页面元素，通过边框将确定的鼠标停留位置处的的页面元素框出，在边框内区域中添加显示按钮。
[0067]本实施例中，“部分全屏”功能被点击后，用户使用鼠标在页面上运动，当鼠标停止运动在某一处停留后，插件在页面的DOM数据上搜索，搜索鼠标坐标停留位置处的的页面元素。搜索到后，以边框框住该页面元素，保存该页面元素的IHTMLElement接口指针到全局变量。同时插件创建一个“全屏”按钮(即所述显示按钮)，并放置在边框内区域的左上角，如图3所示。
[0068]步骤S204，插件在确定显示按钮被选中后，获取所述页面元素的内容。
[0069]本实施例中，用户点击“全屏”按钮，插件调用保存的IHTMLElement接口的get_innerHTML函数获得边框区域内的页面元素的内容，将页面元素的内容innerHTML保存在内存中。
[0070]步骤S205，插件创建新页面元素，设置新页面元素的页面尺寸，将新页面元素添加到页面的元素结构数据中。
[0071]本实施例中，插件使用页面的document接口创建标签为div的新页面元素,并将该页面元素的style属性中的宽度和高度设置为浏览器中整个页面的宽度和高度，使用document接口的AddChild函数把该新页面元素加入到页面的DOM结构中。
[0072]步骤S206，插件将鼠标停留位置处的页面元素的内容赋值给新页面元素，在浏览器页面中显示新页面元素。
[0073]本实施例中，插件将保存的框选元素(即鼠标停留位置处的的页面元素)的innerHTML赋给创建的div元素(即新页面元素)的innerHTML属性。
[0074]步骤S207，插件在显示的新页面元素的页面中添加关闭按钮。
[0075]本实施例中，插件显示该div页面元素，插件隐藏“全屏”按钮，并在同位置创建“关闭”按钮，如图4所示。
[0076]步骤S208，插件在确定关闭按钮被选中后，将新页面元素删除，将新页面元素从页面的元素结构数据中移除，恢复浏览器中显示的页面为原页面。
[0077]本实施例中，用户点击“关闭”按钮，插件使用document接口删除创建的新页面元素，浏览器中恢复显示原有页面内容，并将新页面元素从DOM数据中移除。
[0078]图5为本发明实施例五中实现Web页面显示的系统的结构图。
[0079]所述系统包括:用于将页面元素单独显示的插件模块100和浏览器通信模块200。
[0080]所述浏览器通信模块200，用于接收页面显示命令，以及将页面显示命令传递给浏
IrWSB
JaL-HPT O
[0081]插件模块100包括:功能键添加单元110、页面元素提取单元120和页面元素显示单元130。
[0082]功能键添加单元110，用于在浏览器的菜单中添加功能菜单项或在浏览器的工具栏中添加功能按钮。
[0083]页面元素提取单元120，用于确定功能菜单项或功能按钮被选中后，在浏览器显示的页面中捕捉鼠标的停留操作，当捕捉到鼠标停留在页面中时，搜索页面的元素结构数据确定鼠标停留位置处的页面元素，通过边框将确定的鼠标停留位置处的页面元素框出，获取所述页面元素的内容。
[0084]页面元素显示单元130，用于创建新页面元素，设置新页面元素的页面尺寸，将鼠标停留位置处的页面元素的内容赋值给所述新页面元素，向浏览器通信模块100发送指示浏览器在页面中显示所述新页面元素的页面显示命令。
[0085]其中，页面元素显示单元130在设置新页面元素的页面尺寸时具体用于:将新页面元素的页面的宽和高设置为浏览器中整个页面的宽和高。
[0086]在一实施例中，功能键添加单元110还用于:在边框内区域中添加显示按钮；
[0087]页面元素提取单元120具体用于:在确定显示按钮被选中后，获取页面元素的内容。
[0088]进一步地，功能键添加单元110还用于:在显示的新页面元素的页面中添加关闭按钮。
[0089]页面元素显示单元130还用于:在确定关闭按钮被选中后，将新页面元素删除，向浏览器通信模块100发送指示浏览器将显示的页面恢复为原页面的页面显示命令。
[0090]进一步地，页面元素显示单元130还用于:创建新页面元素后，将新页面元素添加到页面的元素结构数据中。
[0091]页面元素显示单元130还用于:在将新页面元素删除后，将新页面元素从页面的元素结构数据中移除。
[0092]以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。
【权利要求】
1.一种实现Web页面显示的方法，其特征在于，所述方法包括: 创建用于将页面元素单独显示的插件，将插件加载到浏览器，在浏览器的菜单中添加功能菜单项或在浏览器的工具栏中添加功能按钮； 插件确定功能菜单项或功能按钮被选中后，在浏览器显示的页面中捕捉鼠标的停留操作； 当捕捉到鼠标停留在页面中时，插件搜索页面的元素结构数据确定鼠标停留位置处的页面元素，通过边框将确定的鼠标停留位置处的页面元素框出，获取所述页面元素的内容； 插件创建新页面元素，设置新页面元素的页面尺寸，将鼠标停留位置处的页面元素的内容赋值给所述新页面元素，在浏览器的页面中显示所述新页面元素。
2.根据权利要求1所述的方法，其特征在于， 所述插件通过边框将确定的鼠标停留位置处的的页面元素框出后还包括:插件在边框内区域中添加显示按钮； 所述插件获取所述页面元素的内容具体包括: 插件在确定显示按钮被选中后 ，获取所述页面元素的内容。
3.根据权利要求2所述的方法，其特征在于， 所述在浏览器的页面中显示所述新页面元素后还包括: 在显示的新页面元素的页面中添加关闭按钮； 所述方法还包括:插件在确定关闭按钮被选中后，将新页面元素删除，将浏览器中显示的页面恢复为原页面。
4.根据权利要求3所述的方法，其特征在于， 所述插件创建新页面元素后还包括: 插件将新页面元素添加到页面的元素结构数据中， 所述插件将新页面元素删除后还包括: 插件将新页面元素从页面的元素结构数据中移除。
5.根据权利要求1或2所述的方法，其特征在于， 所述插件设置新页面元素的页面尺寸具体包括: 插件将新页面元素的页面的宽和高设置为浏览器中整个页面的宽和高。
6.一种实现Web页面显示的系统，其特征在于，所述系统包括:浏览器通信模块和用于将页面元素单独显示的插件模块， 所述浏览器通信模块，用于接收页面显示命令，以及将页面显示命令传递给浏览器； 所述插件模块包括: 所述功能键添加单元，用于在浏览器的菜单中添加功能菜单项或在浏览器的工具栏中添加功能按钮； 页面元素提取单元，用于确定功能菜单项或功能按钮被选中后，在浏览器显示的页面中捕捉鼠标的停留操作，当捕捉到鼠标停留在页面中时，搜索页面的元素结构数据确定鼠标停留位置处的页面元素，通过边框将确定的鼠标停留位置处的页面元素框出，获取所述页面元素的内容； 页面元素显示单元，用于创建新页面元素，设置新页面元素的页面尺寸，将鼠标停留位置处的页面元素的内容赋值给所述新页面元素，向浏览器通信模块发送指示浏览器在页面中显示所述新页面元素的页面显示命令。
7.根据权利要求6所述的系统，其特征在于， 所述功能键添加单元还用于:在边框内区域中添加显示按钮； 所述页面元素提取单元具体用于:在确定显示按钮被选中后，获取页面元素的内容。
8.根据权利要求7所述的系统，其特征在于， 所述功能键添加单元还用于:在显示的新页面元素的页面中添加关闭按钮； 所述页面元素显示单元还用于:在确定关闭按钮被选中后，将新页面元素删除，向浏览器通信模块发送指示浏览器将显示的页面恢复为原页面的页面显示命令。
9.根据权利要求8所述的系统，其特征在于， 页面元素显示单元还用于:创建新页面元素后，将新页面元素添加到页面的元素结构数据中；在将新页面元素删除后，将新页面元素从页面的元素结构数据中移除。
10.根据权利要求6或7所述的系统，其特征在于， 页面元素显示单元在设置 新页面元素的页面尺寸时具体用于:将新页面元素的页面的宽和高设置为浏览器中整个页面的宽和高。
【文档编号】G06F3/0484GK103729170SQ201210383279
【公开日】2014年4月16日 申请日期:2012年10月10日 优先权日:2012年10月10日
【发明者】郝永建 申请人:北京新媒传信科技有限公司