CN104346403A - 浏览器页面显示方法、装置、浏览器及终端 - Google Patents

浏览器页面显示方法、装置、浏览器及终端 Download PDF

Info

Publication number
CN104346403A
CN104346403A CN201310342810.0A CN201310342810A CN104346403A CN 104346403 A CN104346403 A CN 104346403A CN 201310342810 A CN201310342810 A CN 201310342810A CN 104346403 A CN104346403 A CN 104346403A
Authority
CN
China
Prior art keywords
page
night
browser
style sheet
browser page
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201310342810.0A
Other languages
English (en)
Inventor
张锐杰
蔡荧园
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201310342810.0A priority Critical patent/CN104346403A/zh
Publication of CN104346403A publication Critical patent/CN104346403A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明涉及一种浏览器页面显示方法、装置、浏览器及终端,其方法包括:监测用户端操作浏览器以夜间模式显示浏览器页面的指令;在监测到所述指令后且接收到页面数据并进行页面渲染时,将用于创建夜间模式的网页样式表的脚本代码注入至浏览器页面;执行脚本代码,通过渲染引擎将夜间模式的网页样式表作用到浏览器页面,得到夜间模式的浏览器页面;显示夜间模式的浏览器页面。本发明通过注入动态创建夜间网页样式表的脚本代码到原本的页面,并执行这段脚本代码,从而将浏览器页面渲染成夜间的效果,避免了现有技术加遮罩带来的页面显示模糊的问题,提高了终端浏览器夜间模式的页面显示效果。

Description

浏览器页面显示方法、装置、浏览器及终端
技术领域
本发明涉及互联网技术领域,尤其涉及一种浏览器页面显示方法、装置、浏览器及终端。
背景技术
通常用户在使用浏览器浏览网页时,由于浏览器背景色太亮,如果浏览器时间开的长了,眼睛受到较长时间的刺激会感觉越来越不舒服。
为了解决上述问题,目前在PC终端浏览器以及手机浏览器上大都设置了夜间模式功能。在夜间模式下,网页背景色将变暗,从而可以降低网页对眼睛的刺激,尤其是减小弱光环境下网页对眼睛的刺激,用户阅读网页将感觉更加柔和,因此夜间模式更适合夜间阅读, 而且比较省电。
目前,终端浏览器上的夜间模式大多通过在网页上添加遮罩,把原来的页面显示结果变暗变淡,以此来达到夜间模式的效果。但是,这种通过加遮罩的方式,在将原本的渲染结果变暗变淡的同时,也会使页面渲染结果变得模糊,甚至难于辨认。
发明内容
本发明实施例提供一种浏览器页面显示方法、装置、浏览器及终端,旨在提高终端浏览器夜间模式的页面显示效果。
本发明实施例提出一种浏览器页面显示方法,包括:
监测用户端操作浏览器以夜间模式显示浏览器页面的指令;
在监测到所述指令后且接收到页面数据并进行页面渲染时,将用于创建夜间模式的网页样式表的脚本代码注入至所述浏览器页面;
执行所述脚本代码,通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,得到夜间模式的浏览器页面;
显示所述夜间模式的浏览器页面。
此外,本发明实施例还提出一种浏览器页面显示装置,包括:
监测模块,用于监测用户端操作浏览器以夜间模式显示浏览器页面的指令;
代码注入模块,用于在所述监测模块监测到所述指令后,且接收到页面数据并进行页面渲染时,将用于创建夜间模式的网页样式表的脚本代码注入至所述浏览器页面;
执行模块,用于执行所述脚本代码,通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,得到夜间模式的浏览器页面;
显示模块,用于显示所述夜间模式的浏览器页面。
此外,本发明实施例还提出一种终端浏览器,包括如上所述的装置。
此外,本发明实施例还提出一种终端,包括如上所述的装置。
本发明实施例提出的一种浏览器页面显示方法、装置、浏览器及终端,通过隐藏浏览器页面,接收到页面数据进行页面渲染时,将用于创建夜间模式的网页样式表的脚本代码注入至浏览器页面;执行脚本代码,通过渲染引擎将夜间模式的网页样式表作用到浏览器页面,得到夜间模式的浏览器页面并显示,由此通过注入动态创建夜间网页样式表的脚本代码到原本的页面,并执行这段脚本代码,从而将浏览器页面渲染成夜间的效果,避免了现有技术加遮罩带来的页面显示模糊的问题,提高了终端浏览器夜间模式的页面显示效果。
附图说明
图1是本发明浏览器页面显示方法第一实施例的流程示意图;
图2是本发明实施例中网页样式表的结构示意图;
图3是采用本发明实施例方案与现有技术的添加遮罩方案所得到的页面显示对比结果示意图;
图4是本发明浏览器页面显示方法第二实施例的流程示意图;
图5是本发明浏览器页面显示装置第一实施例的功能模块示意图;
图6是本发明浏览器页面显示装置第二实施例的功能模块示意图。
为了使本发明的技术方案更加清楚、明了,下面将结合附图作进一步详述。
具体实施方式
本发明实施例涉及的技术术语包括:
Javascript:一种基于对象和事件驱动并具有相对安全性的客户端脚本语言,同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作;
css:是Cascading Style Sheet 的缩写,译为“层叠样式表单”,也称级联样式表,用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
本发明实施例解决方案主要是:通过注入动态创建夜间网页样式表的脚本代码到原本的页面,并执行这段脚本代码,从而将浏览器页面渲染成夜间的效果,避免加遮罩带来的页面显示模糊的问题。
如图1所示,本发明第一实施例提出一种浏览器页面显示方法,包括:
步骤S101,监测用户端操作浏览器以夜间模式显示浏览器页面的指令;
其中,浏览器可以为PC终端浏览器,也可以为手机等移动终端浏览器,比如UC 浏览器、QQ 浏览器等。
当用户需要将浏览器页面显示为夜间模式效果时,浏览器首先隐藏当前浏览器页面,以防止用于夜间模式的网页样式表还没注入,浏览器页面就已经渲染出来,即会出现短暂时间的日间效果。
其中,判断用户是否需要将浏览器页面显示为夜间模式效果,可以采用以下方式:在用户首次操作浏览器时即触发浏览器页面显示为夜间模式的指令,或者,在终端操作界面上设置选项按钮,用户可以根据需要选择相应的按钮来触发浏览器页面显示为夜间模式的指令。此外,该选项按钮还可以在夜间模式功能设置成功之后,作为后续夜间模式与日间模式之间的切换按钮,同时,用户还可以根据需要操作相应的选项按钮,来开启或关闭夜间模式功能。
步骤S102,在监测到所述指令后且接收到页面数据并进行页面渲染时,将用于创建夜间模式的网页样式表的脚本代码注入至所述浏览器页面;
浏览器在接收到用户端点击某网址的操作指令后,向后台服务器发送请求,以从后台服务器拉取该网址对应的页面数据。后台服务器收到浏览器的请求后,向浏览器返回相应的页面数据。
浏览器在接收到页面数据后,通过浏览器内核创建dom树,开始渲染所述浏览器页面;并将用于创建夜间模式的网页样式表的代码注入至所述浏览器页面,以便后续在执行该脚本代码时,可以生成夜间模式的网页样式表,使其产生作用。
其中,作为一种较佳实施方式,上述脚本代码具体可以采用Javascript脚本代码。
网页样式表可以为css或者其他用于控制网页中标志性的显示属性的样式表单。该网页样式表相当于一个用来容纳与页面属性相关的样式规则的容器,该样式规则可以为设置链接、文本的颜色,设置背景色,去掉背景图以及设置border的颜色等。因此,在网页样式表中包括样式规则的属性名称及属性值的对应关系,如图2所示,其中样式规则涉及的属性包括链接、文本颜色、背景色、去掉背景图以及边界颜色等,上述属性对应的值可以根据实际需要来设定。
以css为例,本实施例所涉及的css功能有用于创建夜间模式的设置链接、文本的颜色,设置背景色,去掉背景图;以及设置border的颜色等样式规则,所有这些夜间模式的CSS功能所涉及的样式规则都可以通过!important这种设定的语法来指定相应的应用优先级。比如指定两种不同的文本的颜色分别具有的应用优先级为1和2,其中应用优先级1大于应用优先级2。
浏览器在解析脚本代码时,会选取应用优先级比较高的样式规则,将夜间模式的各样式规则的应用优先级提到最高,比如选取应用优先级1的文本的颜色等等。从而将夜间模式的样式规则所设定的页面属性,覆盖浏览器页面标签原本的属性。
步骤S103,执行所述脚本代码,通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,得到夜间模式的浏览器页面;
具体地,上述执行脚本代码的过程如下:
首先解析所述用于创建夜间模式的网页样式表的脚本代码;之后,创建一样式表,该样式表用于存储页面属性的样式规则的属性名称及属性值的对应关系。
可以将所述样式表保存到一全局变量中,保存的目的在于,后续在日间模式与夜间模式之间切换时,可以对所述样式表直接引用而不必进行查询操作。
然后,从所述脚本代码中获取夜间模式的页面属性的样式规则的属性值,将此夜间模式的页面属性的样式规则的属性值设置到所述样式表中,以让这些夜间模式的页面属性的样式规则起作用,由此得到夜间模式的网页样式表;
最后,通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,得到夜间模式的浏览器页面。
以css为例,如前所述,上述夜间模式的页面属性的样式规则可以包括:设置链接、文本的颜色;设置背景色;去掉背景图;以及设置边界颜色等,所有这些夜间模式的CSS功能所涉及的样式规则都可以通过!important这种设定的语法(当然不限定于这种语法)来指定相应的应用优先级,浏览器在解析脚本代码时,根据上述语法设定的样式规则的应用优先级,将页面显示属性的优先级提到最高,以覆盖浏览器页面标签原本的属性。
步骤S104,显示所述夜间模式的浏览器页面。
由此,通过执行所述脚本代码,通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,使网页样式表作用生效,得到夜间模式的浏览器页面,然后将此隐藏的浏览器页面以夜间模式显示出来,从而实现浏览器页面的夜间模式效果。
采用本实施例方案与现有技术的添加遮罩方案所得到的页面显示对比结果如图3所示,图3中圆形区域的左侧为现有技术的添加遮罩方案的显示效果,图3中圆形区域的右侧为采用本实施例方案所得到的页面显示效果。从图3可以看出,图3中圆形区域的右侧的显示效果明显优于图3中圆形区域的左侧的显示效果。
因此,本实施例通过上述方案,通过注入动态创建夜间网页样式表的脚本代码到原本的页面,并执行这段脚本代码,从而将浏览器页面渲染成夜间的效果,避免了现有技术加遮罩带来的页面显示模糊的问题,提高了终端浏览器夜间模式的页面显示效果。
如图4所示,本发明第二实施例提出一种浏览器页面显示方法,在上述第一实施例的基础上,在上述图1所示的步骤S104之后,该方法还包括:
步骤S105,当浏览器页面从夜间模式切换到日间模式时,设置所述网页样式表的属性为不起作用的状态;
步骤S106,通过所述渲染引擎重新渲染所述浏览器页面,得到日间模式的浏览器页面并显示。
本实施例与上述第一实施例的区别在于,本实施例还包括后续在夜间模式与日间模式之间进行切换显示的方案。
具体地,当用户想从夜间模式切换到日间模式时,可以操作相应的选项按钮进行切换选择。
对浏览器而言,当浏览器接收到用户触发的切换指令后,通过设置先前创建的样式表为disable,即不起作用的状态,渲染引擎会重新渲染整个页面,从而将当前页面还原到原始网页页面的状态,由此,将当前夜间模式页面还原到浏览器页面原有的日间模式效果。
当后续再次切换为夜间模式时,浏览器只需重新将注入的css功能开启,即可再次实现夜间模式效果。
本实施例通过上述方案,通过生成用于创建夜间模式的网页样式表的脚本代码,之后将此动态创建夜间网页样式表的脚本代码注入到原本的页面,并执行这段脚本代码,从而将浏览器页面渲染成夜间的效果,避免了现有技术加遮罩带来的页面显示模糊的问题,提高了终端浏览器夜间模式的页面显示效果;此外,根据用户需要还可以在夜间模式与日间模式之间进行自由切换,从而提高了终端浏览器的使用灵活性,满足了用户需求。
下面以css、Javascript代码为例,对本实施例方案进行详细阐述:
首先,在设置浏览器夜间模式功能的起始阶段,先不将页面进行显示,以防止夜间模式的css还没有注入,页面就已经渲染出来,即会出现短暂时间的日间效果。
然后,浏览器在接收到页面数据后,内核开始创建dom树,并开始渲染页面,这时,将创建夜间模式的css的Javascript代码注入页面,这段Javascript代码的作用是用于生成夜间模式的css。
经过上述操作后,浏览器渲染引擎会将注入的夜间模式的css作用进去,这时页面已经是夜间模式,此时,将第一步中隐藏的页面显示出来,即可实现浏览器页面的夜间模式效果。
后续,当需要从夜间模式切换为日间模式时,通过设置先前创建的样式表为disable,渲染引擎会重新渲染整个页面,这样还原到页面原有的显示效果。若再次切换为夜间模式,则只需重新把注入的css开启即可。
相比现有技术,本实施例方案采用注入动态创建夜间css 的javaScript 代码到原本的页面,并执行这段Javascript代码,从而将页面渲染成夜间的效果。从而避免了加遮罩带来的模糊的问题。
如图5所示,本发明第一实施例还提出一种浏览器页面显示装置,包括:监测模块201、代码注入模块202、执行模块203以及显示模块204,其中:
监测模块201,用于监测用户端操作浏览器以夜间模式显示浏览器页面的指令;
代码注入模块202,用于在监测模块201监测到所述指令后,且接收到页面数据并进行页面渲染时,将用于创建夜间模式的网页样式表的脚本代码注入至所述浏览器页面;
执行模块203,用于执行所述脚本代码,通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,得到夜间模式的浏览器页面;
显示模块204,用于显示所述夜间模式的浏览器页面。
其中,浏览器可以为PC终端浏览器,也可以为手机等移动终端浏览器,比如UC 浏览器、QQ 浏览器等。
当用户需要将浏览器页面显示为夜间模式效果时,浏览器首先隐藏当前浏览器页面,以防止用于夜间模式的网页样式表还没注入,浏览器页面就已经渲染出来,即会出现短暂时间的日间效果。
其中,判断用户是否需要将浏览器页面显示为夜间模式效果,可以采用以下方式:在用户首次操作浏览器时即触发浏览器页面显示为夜间模式的指令,或者,在终端操作界面上设置选项按钮,用户可以根据需要选择相应的按钮来触发浏览器页面显示为夜间模式的指令。此外,该选项按钮还可以在夜间模式功能设置成功之后,作为后续夜间模式与日间模式之间的切换按钮,同时,用户还可以根据需要操作相应的选项按钮,来开启或关闭夜间模式功能。
浏览器在接收到用户端点击某网址的操作指令后,向后台服务器发送请求,以从后台服务器拉取该网址对应的页面数据。后台服务器收到浏览器的请求后,向浏览器返回相应的页面数据。
浏览器在接收到页面数据后,通过浏览器内核创建dom树,开始渲染所述浏览器页面;并将用于创建夜间模式的网页样式表的代码注入至所述浏览器页面,以便后续在执行该脚本代码时,可以生成夜间模式的网页样式表,使其产生作用。
其中,作为一种较佳实施方式,上述脚本代码具体可以采用Javascript脚本代码。
网页样式表可以为css或者其他用于控制网页中标志性的显示属性的样式表单。该网页样式表相当于一个用来容纳与页面属性相关的样式规则的容器,该样式规则可以为设置链接、文本的颜色,设置背景色,去掉背景图以及设置border的颜色等。因此,在网页样式表中包括样式规则的属性名称及属性值的对应关系,如图2所示,其中样式规则涉及的属性包括链接、文本颜色、背景色、去掉背景图以及边界颜色等,上述属性对应的值可以根据实际需要来设定。
以css为例,本实施例所涉及的css功能有用于创建夜间模式的设置链接、文本的颜色,设置背景色,去掉背景图;以及设置border的颜色等样式规则,所有这些夜间模式的CSS功能所涉及的样式规则都可以通过!important这种设定的语法来指定相应的应用优先级。比如指定两种不同的文本的颜色分别具有的应用优先级为1和2,其中应用优先级1大于应用优先级2。
浏览器在解析脚本代码时,会选取应用优先级比较高的样式规则,将夜间模式的各样式规则的应用优先级提到最高,比如选取应用优先级1的文本的颜色等等。从而将夜间模式的样式规则所设定的页面属性,覆盖浏览器页面标签原本的属性。
具体地,上述执行脚本代码的过程如下:
首先解析所述用于创建夜间模式的网页样式表的脚本代码;之后,创建一样式表,该样式表用于存储页面属性的样式规则的属性名称及属性值的对应关系。
可以将所述样式表保存到一全局变量中,保存的目的在于,后续在日间模式与夜间模式之间切换时,可以对所述样式表直接引用而不必进行查询操作。
然后,从所述脚本代码中获取夜间模式的页面属性的样式规则的属性值,将此夜间模式的页面属性的样式规则的属性值设置到所述样式表中,以让这些夜间模式的页面属性的样式规则起作用,由此得到夜间模式的网页样式表;
最后,通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,得到夜间模式的浏览器页面。
以css为例,上述夜间模式的页面属性的样式规则可以包括:设置链接、文本的颜色;设置背景色;去掉背景图;以及设置边界颜色等,所有这些夜间模式的CSS功能所涉及的样式规则都可以通过!important这种设定的语法来指定相应的应用优先级,浏览器在解析脚本代码时,根据上述语法设定的样式规则的应用优先级,将页面显示属性的优先级提到最高,以覆盖浏览器页面标签原本的属性。
由此,通过执行所述脚本代码,通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,使网页样式表作用生效,得到夜间模式的浏览器页面,然后将此隐藏的浏览器页面以夜间模式显示出来,从而实现浏览器页面的夜间模式效果。
采用本实施例方案与现有技术的添加遮罩方案所得到的页面显示对比结果如图3所示,图3中圆形区域的左侧为现有技术的添加遮罩方案的显示效果,图3中圆形区域的右侧为采用本实施例方案所得到的页面显示效果。从图3可以看出,图3中圆形区域的右侧的显示效果明显优于图3中圆形区域的左侧的显示效果。
因此,本实施例通过上述方案,通过注入动态创建夜间网页样式表的脚本代码到原本的页面,并执行这段脚本代码,从而将浏览器页面渲染成夜间的效果,避免了现有技术加遮罩带来的页面显示模糊的问题,提高了终端浏览器夜间模式的页面显示效果。
如图6所示,本发明第二实施例还提出一种浏览器页面显示装置,在上述第一实施例的基础上,该装置还包括:
切换模块205,用于当浏览器页面从夜间模式切换到日间模式时,设置所述网页样式表的属性为不起作用的状态;
所述执行模块203,还用于通过所述渲染引擎重新渲染所述浏览器页面,得到日间模式的浏览器页面,并由所述显示模块204进行显示。
本实施例与上述第一实施例的区别在于,本实施例还包括后续在夜间模式与日间模式之间进行切换显示的方案。
具体地,当用户想从夜间模式切换到日间模式时,可以操作相应的选项按钮进行切换选择。
对浏览器而言,当浏览器接收到用户触发的切换指令后,通过设置先前创建的样式表为disable,即不起作用的状态,渲染引擎会重新渲染整个页面,从而将当前页面还原到原始网页页面的状态,由此,将当前夜间模式页面还原到浏览器页面原有的日间模式效果。
当后续再次切换为夜间模式时,浏览器只需重新将注入的css功能开启,即可再次实现夜间模式效果。
本实施例通过上述方案,通过生成用于创建夜间模式的网页样式表的脚本代码,之后将此动态创建夜间网页样式表的脚本代码注入到原本的页面,并执行这段脚本代码,从而将浏览器页面渲染成夜间的效果,避免了现有技术加遮罩带来的页面显示模糊的问题,提高了终端浏览器夜间模式的页面显示效果;此外,根据用户需要还可以在夜间模式与日间模式之间进行自由切换,从而提高了终端浏览器的使用灵活性,满足了用户需求。
下面以css、Javascript代码为例,对本实施例方案进行详细阐述:
首先,在设置浏览器夜间模式功能的起始阶段,先不将页面进行显示,以防止夜间模式的css还没有注入,页面就已经渲染出来,即会出现短暂时间的日间效果。
然后,浏览器在接收到页面数据后,内核开始创建dom树,并开始渲染页面,这时,将创建夜间模式的css的Javascript代码注入页面,这段Javascript代码的作用是用于生成夜间模式的css。
经过上述操作后,浏览器渲染引擎会将注入的夜间模式的css作用进去,这时页面已经是夜间模式,此时,将第一步中隐藏的页面显示出来,即可实现浏览器页面的夜间模式效果。
后续,当需要从夜间模式切换为日间模式时,通过设置先前创建的样式表为disable,渲染引擎会重新渲染整个页面,这样还原到页面原有的显示效果。若再次切换为夜间模式,则只需重新把注入的css开启即可。
相比现有技术,本实施例方案采用注入动态创建夜间css 的javaScript 代码到原本的页面,并执行这段Javascript代码,从而将页面渲染成夜间的效果。从而避免了加遮罩带来的模糊的问题。
此外,本发明实施例还提出一种终端浏览器,其可以包括如上实施例所述的装置,该装置当监测到用户端操作浏览器以显示浏览器页面时,隐藏所述浏览器页面;在接收到页面数据并进行页面渲染时,将用于创建夜间模式的网页样式表的脚本代码注入至所述浏览器页面;执行所述脚本代码,通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,得到夜间模式的浏览器页面;显示所述夜间模式的浏览器页面。本实施例终端浏览器实现夜间模式的详细过程请参照上述实施例,在此不再赘述。
此外,本发明实施例还提出一种终端,其可以包括如上实施例所述的装置,该装置当监测到用户端操作浏览器以显示浏览器页面时,隐藏所述浏览器页面;在接收到页面数据并进行页面渲染时,将用于创建夜间模式的网页样式表的脚本代码注入至所述浏览器页面;执行所述脚本代码,通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,得到夜间模式的浏览器页面;显示所述夜间模式的浏览器页面。本实施例终端实现夜间模式的详细过程请参照上述实施例,在此不再赘述。
本发明实施例浏览器页面显示方法、装置、浏览器及终端,通过隐藏浏览器页面,接收到页面数据进行页面渲染时,将用于创建夜间模式的网页样式表的脚本代码注入至浏览器页面;执行脚本代码,通过渲染引擎将夜间模式的网页样式表作用到浏览器页面,得到夜间模式的浏览器页面并显示,由此通过注入动态创建夜间网页样式表的脚本代码到原本的页面,并执行这段脚本代码,从而将浏览器页面渲染成夜间的效果,避免了现有技术加遮罩带来的页面显示模糊的问题,提高了终端浏览器夜间模式的页面显示效果。
需要说明的是,在本文中,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述,不代表实施例的优劣。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中,包括若干指令用以使得一台终端设备(可以是手机,计算机,服务器,或者网络设备等)执行本发明各个实施例所述的方法。具体地,图5至图7所述的浏览器页面显示装置所对应的程序指令可以存储在用户终端或者客户端的可读存储介质中,并被其中的至少一个处理器执行,以实现图1至图4所述的浏览器页面显示方法。
以上所述仅为本发明的优选实施例,并非因此限制本发明的专利范围,凡是利用本发明说明书及附图内容所作的等效结构或流程变换,或直接或间接运用在其它相关的技术领域,均同理包括在本发明的专利保护范围内。

Claims (18)

1.一种浏览器页面显示方法,其特征在于,包括:
监测用户端操作浏览器以夜间模式显示浏览器页面的指令;
在监测到所述指令后且接收到页面数据并进行页面渲染时,将用于创建夜间模式的网页样式表的脚本代码注入至所述浏览器页面;
执行所述脚本代码,通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,得到夜间模式的浏览器页面;
显示所述夜间模式的浏览器页面。
2.根据权利要求1所述的方法,其特征在于,所述在接收到页面数据并进行页面渲染时,将用于创建夜间模式的网页样式表的脚本代码注入至所述浏览器页面的步骤包括:
在接收到页面数据时,通过浏览器内核创建dom树,开始渲染所述浏览器页面;
将用于创建所述夜间模式的网页样式表的脚本代码注入至所述浏览器页面。
3.根据权利要求2所述的方法,其特征在于,所述执行脚本代码,通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,得到夜间模式的浏览器页面的步骤包括:
解析所述用于创建夜间模式的网页样式表的脚本代码;
创建一样式表,所述样式表用于存储页面属性的样式规则的属性名称及属性值的对应关系;
从所述脚本代码中获取夜间模式的页面属性的样式规则的属性值,设置到所述样式表中,得到夜间模式的网页样式表;
通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,得到夜间模式的浏览器页面。
4.根据权利要求3所述的方法,其特征在于,所述夜间模式的页面属性的样式规则包括:设置链接、文本的颜色;设置背景色;去掉背景图;和/或设置边界颜色。
5.根据权利要求4所述的方法,其特征在于,所述夜间模式的页面属性的样式规则通过设定的语法指定有应用优先级。
6.根据权利要求3所述的方法,其特征在于,所述创建一样式表的步骤之后还包括:
将所述样式表保存到一全局变量中。
7.根据权利要求1-6中任一项所述的方法,其特征在于,还包括:
当浏览器页面从夜间模式切换到日间模式时,设置所述网页样式表的属性为不起作用的状态;
通过所述渲染引擎重新渲染所述浏览器页面,得到日间模式的浏览器页面并显示。
8.根据权利要求1所述的方法,其特征在于,在监测到用户端操作浏览器以夜间模式显示浏览器页面的指令之后还包括:
隐藏所述浏览器页面。
9.一种浏览器页面显示装置,其特征在于,包括:
监测模块,用于监测用户端操作浏览器以夜间模式显示浏览器页面的指令;
代码注入模块,用于在所述监测模块监测到所述指令后,且接收到页面数据并进行页面渲染时,将用于创建夜间模式的网页样式表的脚本代码注入至所述浏览器页面;
执行模块,用于执行所述脚本代码,通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,得到夜间模式的浏览器页面;
显示模块,用于显示所述夜间模式的浏览器页面。
10.根据权利要求9所述的装置,其特征在于,
所述代码注入模块,还用于在接收到页面数据时,通过浏览器内核创建dom树,开始渲染所述浏览器页面;将用于所述创建夜间模式的网页样式表的脚本代码注入至所述浏览器页面。
11.根据权利要求10所述的装置,其特征在于,所述执行模块还用于:解析所述用于创建夜间模式的网页样式表的脚本代码;创建一样式表;所述样式表用于存储页面属性的样式规则的属性名称及属性值的对应关系;从所述脚本代码中获取夜间模式的页面属性的样式规则的属性值,设置到所述样式表中,得到夜间模式的网页样式表;通过渲染引擎将所述夜间模式的网页样式表作用到所述浏览器页面,得到夜间模式的浏览器页面。
12.根据权利要求11所述的装置,其特征在于,所述夜间模式的页面属性的样式规则包括:设置链接、文本的颜色;设置背景色;去掉背景图;和/或设置边界颜色。
13.根据权利要求12所述的装置,其特征在于,所述夜间模式的页面属性的样式规则通过设定的语法指定有应用优先级。
14.根据权利要求11所述的装置,其特征在于,所述执行模块还用于在创建所述样式表之后,将所述样式表保存到一全局变量中。
15.根据权利要求9-14中任一项所述的装置,其特征在于,还包括:
切换模块,用于当浏览器页面从夜间模式切换到日间模式时,设置所述网页样式表的属性为不起作用的状态;
所述执行模块,还用于通过所述渲染引擎重新渲染所述浏览器页面,得到日间模式的浏览器页面,并由所述显示模块进行显示。
16.根据权利要求9所述的装置,其特征在于,所述监测模块还用于在监测到用户端操作浏览器以夜间模式显示浏览器页面的指令后隐藏所述浏览器页面。
17.一种终端浏览器,其特征在于,包括权利要求9-16中任一项所述的装置。
18.一种终端,其特征在于,包括权利要求9-16中任一项所述的装置。
CN201310342810.0A 2013-08-07 2013-08-07 浏览器页面显示方法、装置、浏览器及终端 Pending CN104346403A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201310342810.0A CN104346403A (zh) 2013-08-07 2013-08-07 浏览器页面显示方法、装置、浏览器及终端

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201310342810.0A CN104346403A (zh) 2013-08-07 2013-08-07 浏览器页面显示方法、装置、浏览器及终端

Publications (1)

Publication Number Publication Date
CN104346403A true CN104346403A (zh) 2015-02-11

Family

ID=52502016

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201310342810.0A Pending CN104346403A (zh) 2013-08-07 2013-08-07 浏览器页面显示方法、装置、浏览器及终端

Country Status (1)

Country Link
CN (1) CN104346403A (zh)

Cited By (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103577171A (zh) * 2012-07-30 2014-02-12 腾讯科技(深圳)有限公司 一种显示网页内容的方法和移动终端
CN105446786A (zh) * 2015-12-30 2016-03-30 广东欧珀移动通信有限公司 交互界面模式切换方法及装置
CN105487893A (zh) * 2015-11-26 2016-04-13 小米科技有限责任公司 移动终端界面蒙板的显示方法和移动终端
CN105528389A (zh) * 2015-11-09 2016-04-27 上海二三四五网络科技有限公司 一种基于手机浏览器内核的逻辑控制方法及装置
CN105701165A (zh) * 2015-12-30 2016-06-22 广东欧珀移动通信有限公司 浏览器模式切换方法及切换装置
CN105824874A (zh) * 2016-02-01 2016-08-03 乐视移动智能信息技术(北京)有限公司 移动终端及其网页渲染方法、装置
CN105979392A (zh) * 2015-09-14 2016-09-28 乐视致新电子科技(天津)有限公司 网页显示方法和浏览器
CN106126725A (zh) * 2016-06-30 2016-11-16 北京小米移动软件有限公司 页面显示方法及装置
CN106210915A (zh) * 2016-08-09 2016-12-07 乐视控股(北京)有限公司 一种浏览器视频播放模式切换处理方法及装置
CN106407279A (zh) * 2016-08-26 2017-02-15 乐视控股(北京)有限公司 网页样式设置处理方法及装置
CN106469439A (zh) * 2016-08-30 2017-03-01 乐视控股(北京)有限公司 一种夜间模式中图片的处理方法及装置
CN106484396A (zh) * 2016-09-18 2017-03-08 北京京东尚科信息技术有限公司 夜间模式切换方法、装置和终端设备
WO2017129031A1 (zh) * 2016-01-26 2017-08-03 腾讯科技(深圳)有限公司 信息获取方法及装置
CN108108367A (zh) * 2016-11-24 2018-06-01 腾讯科技(深圳)有限公司 一种网页显示方法和装置
CN110704125A (zh) * 2019-09-19 2020-01-17 腾讯科技(深圳)有限公司 一种网页加载方法、装置及存储介质和终端设备
CN111177606A (zh) * 2019-12-23 2020-05-19 望海康信(北京)科技股份公司 控制浏览器渲染网页的方法及装置
CN111367606A (zh) * 2020-03-03 2020-07-03 北京奇艺世纪科技有限公司 一种应用程序页面的显示方法、装置、终端及介质
CN111428169A (zh) * 2020-03-20 2020-07-17 深圳市盟天科技有限公司 页面加载的优化方法、系统、服务器及存储介质
US11217205B2 (en) 2018-07-12 2022-01-04 Samsung Electronics Co., Ltd. Method and apparatus for rendering contents for vision accessibility

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102663050A (zh) * 2012-03-29 2012-09-12 奇智软件(北京)有限公司 电子书数据处理方法与装置
US20120254729A1 (en) * 2009-12-30 2012-10-04 Beijing Sogou Technology Development Co., Ltd. Web page element presenting method and system
CN103179453A (zh) * 2011-12-26 2013-06-26 中国电信股份有限公司 一种向终端提供内容数据的方法和系统

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120254729A1 (en) * 2009-12-30 2012-10-04 Beijing Sogou Technology Development Co., Ltd. Web page element presenting method and system
CN103179453A (zh) * 2011-12-26 2013-06-26 中国电信股份有限公司 一种向终端提供内容数据的方法和系统
CN102663050A (zh) * 2012-03-29 2012-09-12 奇智软件(北京)有限公司 电子书数据处理方法与装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
BORROW: "保护双眼 自动进入夜间模式", 《技巧与实践》 *

Cited By (26)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103577171A (zh) * 2012-07-30 2014-02-12 腾讯科技(深圳)有限公司 一种显示网页内容的方法和移动终端
CN103577171B (zh) * 2012-07-30 2018-11-13 腾讯科技(深圳)有限公司 一种显示网页内容的方法和移动终端
CN105979392A (zh) * 2015-09-14 2016-09-28 乐视致新电子科技(天津)有限公司 网页显示方法和浏览器
CN105528389A (zh) * 2015-11-09 2016-04-27 上海二三四五网络科技有限公司 一种基于手机浏览器内核的逻辑控制方法及装置
CN105487893A (zh) * 2015-11-26 2016-04-13 小米科技有限责任公司 移动终端界面蒙板的显示方法和移动终端
CN105446786A (zh) * 2015-12-30 2016-03-30 广东欧珀移动通信有限公司 交互界面模式切换方法及装置
CN105701165A (zh) * 2015-12-30 2016-06-22 广东欧珀移动通信有限公司 浏览器模式切换方法及切换装置
CN105701165B (zh) * 2015-12-30 2019-08-13 Oppo广东移动通信有限公司 浏览器模式切换方法及切换装置
WO2017129031A1 (zh) * 2016-01-26 2017-08-03 腾讯科技(深圳)有限公司 信息获取方法及装置
US10884605B2 (en) 2016-01-26 2021-01-05 Tencent Technology (Shenzhen) Company Limited Methods and systems for displaying hidden information on a web page
CN105824874A (zh) * 2016-02-01 2016-08-03 乐视移动智能信息技术(北京)有限公司 移动终端及其网页渲染方法、装置
CN106126725A (zh) * 2016-06-30 2016-11-16 北京小米移动软件有限公司 页面显示方法及装置
CN106210915A (zh) * 2016-08-09 2016-12-07 乐视控股(北京)有限公司 一种浏览器视频播放模式切换处理方法及装置
CN106407279A (zh) * 2016-08-26 2017-02-15 乐视控股(北京)有限公司 网页样式设置处理方法及装置
CN106469439A (zh) * 2016-08-30 2017-03-01 乐视控股(北京)有限公司 一种夜间模式中图片的处理方法及装置
CN106484396B (zh) * 2016-09-18 2020-03-03 北京京东尚科信息技术有限公司 夜间模式切换方法、装置和终端设备
CN106484396A (zh) * 2016-09-18 2017-03-08 北京京东尚科信息技术有限公司 夜间模式切换方法、装置和终端设备
CN108108367A (zh) * 2016-11-24 2018-06-01 腾讯科技(深圳)有限公司 一种网页显示方法和装置
CN108108367B (zh) * 2016-11-24 2021-10-26 腾讯科技(深圳)有限公司 一种网页显示方法和装置
US11217205B2 (en) 2018-07-12 2022-01-04 Samsung Electronics Co., Ltd. Method and apparatus for rendering contents for vision accessibility
CN110704125A (zh) * 2019-09-19 2020-01-17 腾讯科技(深圳)有限公司 一种网页加载方法、装置及存储介质和终端设备
CN110704125B (zh) * 2019-09-19 2024-06-21 腾讯科技(深圳)有限公司 一种网页加载方法、装置及存储介质和终端设备
CN111177606A (zh) * 2019-12-23 2020-05-19 望海康信(北京)科技股份公司 控制浏览器渲染网页的方法及装置
CN111177606B (zh) * 2019-12-23 2023-12-15 望海康信(北京)科技股份公司 控制浏览器渲染网页的方法及装置
CN111367606A (zh) * 2020-03-03 2020-07-03 北京奇艺世纪科技有限公司 一种应用程序页面的显示方法、装置、终端及介质
CN111428169A (zh) * 2020-03-20 2020-07-17 深圳市盟天科技有限公司 页面加载的优化方法、系统、服务器及存储介质

Similar Documents

Publication Publication Date Title
CN104346403A (zh) 浏览器页面显示方法、装置、浏览器及终端
US11347826B2 (en) Systems and methods for hosted applications
KR102436987B1 (ko) 웹페이지 콘텐츠를 추출하기 위한 방법 및 단말 장치
CN105094786B (zh) 基于JavaScript定制页面的方法及系统
CN110020323B (zh) 混合应用的页面切换方法、系统、计算机设备及存储介质
JP6818693B2 (ja) アプリケーションページクイックアクセス
CN103984686B (zh) 页面切换方法及装置
CN108459888B (zh) 多页面切换方法、装置、终端设备及存储介质
CN109842818A (zh) 一种视频播放方法、装置、计算机设备及存储介质
CN105094804A (zh) 在页面中添加动画的方法和装置
CN103581314A (zh) 一种在app启动页实现应用推荐的方法及系统
CN105159677A (zh) 终端用户界面的受控显示方法及装置
CN102663050B (zh) 电子书数据处理方法与装置
CN105677654A (zh) 广告过滤方法及装置
CN112631591B (zh) 表元素联动方法、装置、设备与计算机可读存储介质
CN108279942A (zh) 展示智能终端应用启动页的方法及装置
CN106339163A (zh) 一种App内置浏览器与内嵌网页回退交互的方法
CN104133865A (zh) 一种广告过滤方法以及装置
US20240007701A1 (en) Continuing video playback when switching from a dynamic page to a non-dynamic page
CN105786846A (zh) 一种可自定义生成模块的网站平台组件
CN110941428A (zh) 一种网站创建方法和装置
CN108319474B (zh) 一种页面信息生成方法、装置和设备
CN105205845A (zh) 网页动画渲染方法及装置
CN108664191B (zh) 系统访问方法及装置
CN103309741A (zh) 调用插件功能的方法和装置

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20150211

RJ01 Rejection of invention patent application after publication