页面加载方法、客户端、系统和电子设备与流程

文档序号:11620601阅读:141来源:国知局
页面加载方法、客户端、系统和电子设备与流程
本申请涉及计算机网络
技术领域
,尤其是涉及一种页面加载方法、客户端、系统和电子设备。
背景技术
:随着计算机网络的发展,人们越依赖于网络获取信息和服务,例如通过网络阅读文字信息、查看图片、播放影音、在线购物等等,从而给人们带来极其丰富的工作和生活体验。上述这些信息和服务往往是通过页面形式呈现给用户的。具体的,当用户过浏览器等客户端向服务器发起url(uniformresourcelocator,统一资源定位符)请求时,对应的服务器会根据url请求,将相应的资源文件响应给浏览器;浏览器将接收到的资源文件进行整理并呈现到页面中。其中,由于每个页面都有其部头部信息,在一些情况下,有的页面内可能会嵌入有一个或多个外部页面。这样在嵌入后,会出现一个页面中有不止一个头部信息的情况下,从而可能会给用户造成困扰。特别是,当嵌入的外部页面是第三方页面时,由于不同的web服务提供商所提供的页面头部信息的风格往往也不同,这样,呈献给用户的页面中甚至会出现风格不同的多个页面头部信息,从而影响了用户体验。技术实现要素:本申请实施例的目的在于提供一种页面加载方法、客户端、系统和电子设备,以防止在页面内嵌入外部页面时出现多个页面头部信息。为达到上述目的,一方面,本申请实施例提供了一种页面加载方法,包括以下步骤:接收服务器针对用户的页面请求所返回的页面;所述页面中包括该页面的域名所对应的页面头部表;在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识;在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。另一方面,本申请实施例提供了一种客户端,包括:页面接收模块,用于接收服务器针对用户的页面请求所返回的页面;所述页面中包括该页面的域名所对应的页面头部表;标识匹配模块,用于在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识;属性隐藏模块,用于在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。另一方面,本申请实施例提供了一种电子设备,包括:输入输出设备,用于接收服务器针对用户的页面请求所返回的页面;所述页面中包括该页面的域名所对应的页面头部表;处理器,用于在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识;在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。另一方面,本申请实施例提供了一种系统,包括服务器和客户端,其中:所述服务器,用于针对用户的页面请求,向所述客户端返回页面;所述页面中包括该页面的域名所对应的页面头部表;所述客户端,用于在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识;在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。另一方面,本申请实施例提供了另一种页面加载方法,包括以下步骤:接收服务器针对用户的页面请求所返回的页面;所述页面中包括该页面的域名所对应的页面头部表的资源路径;在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述资源路径从所述服务器获取所述页面头部表;根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识;在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。另一方面,本申请实施例提供了另一种客户端,包括:页面接收模块,用于接收服务器针对用户的页面请求所返回的页面;所述页面中包括该页面的域名所对应的页面头部表的资源路径;头部表获取模块,用于在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述资源路径从所述服务器获取所述页面头部表;标识匹配模块,用于根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识;属性隐藏模块,用于在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并将所述头部信息的层叠样式表css的显示相关属性设置为隐藏。另一方面,本申请实施例提供了另一种电子设备,包括:输入输出设备,用于接收服务器针对用户的页面请求所返回的页面;所述页面中包括该页面的域名所对应的页面头部表的资源路径;处理器,用于在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述资源路径从所述服务器获取所述页面头部表;根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识;在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。另一方面,本申请实施例提供了另一种系统,包括服务器和客户端,其中:所述服务器,用于针对用户的页面请求,向所述客户端返回页面;所述页面中包括该页面的域名所对应的页面头部表的资源路径;所述客户端,用于在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述资源路径从所述服务器获取所述页面头部表;根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识;在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。本申请实施例中,服务器返回的页面包括该页面的域名所对应的页面头部表;在加载页面的过程中,当检测到页面中包含iframe标签时,可根据iframe标签内的url地址,从页面头部表中匹配url地址对应的外部页面的头部标识;在加载外部页面时,可根据头部标识确定外部页面的头部信息,并调整头部信息的css的显示相关属性,以使头部信息不可见,从而避免了当页面内嵌入外部页面时出现多个页面头部信息的问题,因而本申请实施例提高了用户体验。附图说明此处所说明的附图用来提供对本申请实施例的进一步理解,构成本申请实施例的一部分,并不构成对本申请实施例的限定。在附图中:图1为本申请实施例的一种页面加载方法的流程图;图2为本申请实施例中,在页面内嵌入外部页面时存在多个页面头部信息时的示意图;图3为本申请实施例中,在页面内嵌入外部页面时存在一个头部信息的示意图;图4为本申请实施例的另一种页面加载方法的流程图;图5为本申请实施例的一种客户端的结构框图;图6为本申请实施例的一种电子设备的结构框图;图7为本申请实施例的一种系统的结构框图;图8为本申请实施例的另一种客户端的结构框图。具体实施方式为使本申请实施例的目的、技术方案和优点更加清楚明白,下面结合实施例和附图,对本申请实施例做进一步详细说明。在此,本申请实施例的示意性实施例及其说明用于解释本申请实施例,但并不作为对本申请实施例的限定。下面结合附图,对本申请实施例的具体实施方式作进一步的详细说明。参考图1所示,本申请实施例的页面加载方法包括以下步骤:s101、接收服务器针对用户的页面请求所返回的页面;所述页面中包括该页面的域名所对应的页面头部表。本申请实施例的执行主体可以为客户端。所述的客户端可以为浏览器(例如ie浏览器、360浏览器等),也可以为app客户端(例如京东客户端、微信客户端等)。在应用时,用户可通过配置于电子设备上的客户端发起页面请求。其中,所述电子设备例如可以为台式电脑、平板电脑、笔记本电脑、智能手机、数字助理、智能可穿戴设备、导购终端、具有网络访问功能的电视机等。本申请实施例中,所述的页面请求可以是任何场景下的页面请求,例如商品或服务的浏览请求、网购时的订单支付请求、第三方支付平台的转账请求、微信朋友圈查看请求等等。本申请实施例中,所述服务器可以为应用服务器或web服务器等。并且,本申请实施例并不限定服务器的数量,其可以为一个服务器,还可以为几个服务器,或者,若干服务器形成的服务器集群。本申请实施例中,所述页面头部表是预先创建好的,所述页面头部表中包括外部页面的url地址及其头部标识的映射关系。所述的外部页面可以是同一域名下的其他页面,也可以是第三方页面;其中,所述第三方页面是指第三方网站的页面。本申请实施例中,所述外部页面可以这样理解,对于一个页面而言,当其内嵌有其他页面时,这个其他页面即属于外部页面;例如在网购平台的订单页面中,嵌入有第三方支付平台的支付页面,这个支付页面即为外部页面。其中,所述的嵌入可以是全部嵌入,也可以是部分嵌入。本申请实施例中,一个域名可以唯一对应有一个页面头部表。一般的,由于同一个域名下往往有多个路径,每个路径对应有一个页面;这样,对于同一域名下的所有页面内嵌入的外部页面,可将其url地址及其头部标识的映射关系,放置在同一张页面头部表中,以便于维护。因此,不论用户请求的是同一个域名的哪一个路径所对应的页面,服务器都会将该域名对应的唯一的页面头部表作为页面响应的一部分返回给用户。当然,页面头部表本身不属于要展示给用户的部分,因此其显示属性默认可设置为隐藏。本申请实施例中,一个域名下的任何页面内的页面嵌入有变化时,可相应的更新该域名对应的页面头部表。其中,所述的变化,例如可以为一个页面中嵌入了新的外部页面,一个页面中嵌入的外部页面被删除了等等。本申请实施例中,所述外部页面所述头部标识可以为头部div(division,划分)标签的标识(id),也可以为头部div标签的类(class)。为便于理解本申请实施例的页面头部表,下面通过表1来举例说明。如下表1所示,一个域名下的所有页面中总共内嵌有三个外部页面,这三个外部页面的url地址及其头部标识的对应关系如下:表1url头部标识https://www.koubei.com/divclass="header"https://www.sina.com.cn/divclass="top-search-wrap"http://www.qq.com/divclass="soso"s102、在加载所述页面的过程中,检测所述页面中是否包含iframe标签;如果包括,则执行步骤s103,否则继续执行本步骤。本申请实施例中,服务器返回的页面一般是超级文本标记语言(hypertextmarkuplanguage,html)文档。浏览器等客户端在接收到html文档后,可将其组织(包括加载、解析和渲染)成用户可以查看的页面。本申请实施例中,iframe标签是一种html标签,其可用于创建包含另外一个文档的内联框架(即行内框架),即用于创建文档中的文档。因此,如果需要在一个页面的任何指定位置嵌入外部页面:xxx.htm时,可在该页面的代码中的该指定位置处插入如下语句实现:<iframename="xxx"width=xheight=xframeborder=0src="xxx.htm"></iframe>其中,iframe标签中的各种属性含义请查阅html标签相关技术手册。此外,当在一个页面内嵌入外部页面时可能会出现背景色不同的情况,这样会给人造成页面不是一个整体的感觉。这时,可以在iframe标签内设置属allowtransparency="true"(即框架背景透明)即可:<iframename="xxx"width=xheight=xframeborder=0allowtransparency="true"src="xxx.htm"></iframe>由于iframe标签是成对出现的,即以<iframe>开始,以</iframe>结束。因此,在加载服务器返回的页面的过程中,通过字符串匹配等方式可以检测出页面中是否包含iframe标签。如果页面中包含iframe标签,则表明该页面中内嵌有外部页面;否则继续进行检测,直至完成加载。s103、在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识。本申请实施例中,由于页面头部表中包括外部页面的url地址及其头部标识的映射关系,因此,根据所述iframe标签内的url地址,从所述页面头部表中映射到所述url地址对应的外部页面的头部标识,以便于后续可根据该头部标识从加载的外部页面中找到对应的头部信息。s104、在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。本申请一个实施例中,所述的调整可以为通过预设的脚本将所述css(cascadingstylesheets,层叠样式表)的显示属性(display)的值设置为不存在(none);本申请另一个实施例中,所述的调整也可以为通过预设的脚本将所述css的可见属性(visibility)的值设置为隐藏(hidden)。其中所述的脚本例如可以为jquery脚本或javascript脚本等。本申请实施例中,虽然将css的display属性的值设置为none,以及将css的visibility属性的值设置为hidden,都可以使头部信息不可见。但是二者也有所区别。具体的,display属性为none是指:不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,不存在;而visibility属性为hidden是指:使对象在页面上不可见,但该对象在网页上所占的空间没有改变,即实际存在只是被隐藏了而言。在实际应用时,可根据具体需要选择使头部信息不可见的方式。下面结合一个示例来说明本申请的页面加载方法。当用户请求的口碑网页面中内嵌有支付宝页面时,如果采用现有方法对服务器返回的页面响应进行处理,展示给用户的口碑网页面中会出现两个头部信息(见图2中的两个虚线框)。这样,会给用户带来困惑,从而影响用户体验。而如果采用本申请实例的页面加载方法对服务器返回的页面响应进行处理,支付宝页面的头部信息就会被隐藏掉,从而展示用户的口碑网页面只中会出现一个头部信息(见图3中的虚线框),从而避免了用户在一个页面中看到两个头部信息造成的困惑感,用户体验较好。结合图4所示,本申请实施例的页面加载方法包括以下步骤:s401、接收服务器针对用户的页面请求所返回的页面;所述页面中包括该页面的域名所对应的页面头部表的资源路径。与上述图1所示方法实施例相比,本申请实施例中,服务器针对用户的页面请求所返回的页面中,携带的不再是页面头部表,而是指向页面头部表的资源路径。在一个示例性实施例中,所述资源路径例如可以为一个url地址。后续当需要下载页面头部表(即检测到页面中包含iframe标签)时,再从所述服务器下载对应的页面头部表。s402、在加载所述页面的过程中,检测所述页面中是否包含iframe标签;如果包括,则执行步骤s403,否则继续执行本步骤。s403、在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述资源路径从所述服务器获取所述页面头部表。本申请实施例中,当检测到所述页面中包含iframe标签时,可向服务器发起携带有该资源路径的访问请求,例如json(javascriptobjectnotation,javascript对象表示法)格式的http请求,以从所述服务器获得对应的页面头部表。本申请实施例中,当采用json式的访问请求时,服务器就可以通过序裂化将页面头部表中的数据转换为json格式字符串后返回给浏览器等客户端,而json格式字符串不但能够提高可代码的读性,还可以减少代码的复杂性。s404、根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识。s405、在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。本申请实施例的页面加载方法是上述图1所示方法实施例的变形,因此,本申请实施例的页面加载方法未详细说明之处,请参见上述图1所示方法实施例,在此不再赘述。虽然上文描述的过程流程包括以特定顺序出现的多个操作,但是,应当清楚了解,这些过程可以包括更多或更少的操作,这些操作可以顺序执行或并行执行(例如使用并行处理器或多线程环境)。参见图5所示,本申请实施例的客户端包括:页面接收模块51,用于接收服务器针对用户的页面请求所返回的页面;所述页面中包括该页面的域名所对应的页面头部表。标识匹配模块52,用于在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识。属性隐藏模块53,用于在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。本申请实施例的客户端与上述图1所示方法实施例的对应,因此,本申请实施例的客户端未详细说明之处,请参见上述图1所示方法实施例,在此不再赘述。参见图6所示,本申请实施例的电子设备可以包括输入输出设备、处理器和显示器。其中:输入输出设备,用于接收服务器针对用户的页面请求所返回的页面;所述页面中包括该页面的域名所对应的页面头部表;处理器,用于在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识;在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。本申请实施例的电子设备与上述图1所示方法实施例的对应,因此,本申请实施例的电子设备未详细说明之处,请参见上述图1所示方法实施例,在此不再赘述。参见图7所示,本申请实施例的系统,包括服务器和客户端,其中:所述服务器,用于针对用户的页面请求,向所述客户端返回页面;所述页面中包括该页面的域名所对应的页面头部表。所述客户端,用于在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识;在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。本申请实施例的系统与上述图1所示方法实施例的对应,因此,本申请实施例的系统未详细说明之处,请参见上述图1所示方法实施例,在此不再赘述。参见图8所示,本申请实施例的客户端包括:页面接收模块81,用于接收服务器针对用户的页面请求所返回的页面;所述页面中包括该页面的域名所对应的页面头部表的资源路径;头部表获取模块82,用于在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述资源路径从所述服务器获取所述页面头部表;标识匹配模块83,用于根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识;属性隐藏模块84,用于在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并将所述头部信息的层叠样式表css的显示相关属性设置为隐藏。本申请实施例的客户端与上述图2所示方法实施例的对应,因此,本申请实施例的客户端未详细说明之处,请参见上述图2所示方法实施例,在此不再赘述。本申请实施例的电子设备与上述图2所示方法实施例的对应,该电子设备可以包括输入输出设备、处理器和显示器。其中:输入输出设备,用于接收服务器针对用户的页面请求所返回的页面;所述页面中包括该页面的域名所对应的页面头部表的资源路径;处理器,用于在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述资源路径从所述服务器获取所述页面头部表;根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识;在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。有关于本申请实施例的电子设备未详细说明之处,请参见上述图2所示方法实施例,在此不再赘述。本申请实施例的系统与上述图2所示方法实施例的对应,该系统包括服务器和客户端,其中:所述服务器,用于针对用户的页面请求,向所述客户端返回页面;所述页面中包括该页面的域名所对应的页面头部表的资源路径;所述客户端,用于在加载所述页面的过程中,当检测到所述页面中包含iframe标签时,根据所述资源路径从所述服务器获取所述页面头部表;根据所述iframe标签内的url地址,从所述页面头部表中匹配所述url地址对应的外部页面的头部标识;在加载所述外部页面时,根据所述头部标识确定所述外部页面的头部信息,并调整所述头部信息的层叠样式表css的显示相关属性,以使所述头部信息不可见。有关于本申请实施例的系统未详细说明之处,请参见上述图2所示方法实施例,在此不再赘述。上述实施例中,服务器返回的页面包括该页面的域名所对应的页面头部表;在加载页面的过程中,当检测到页面中包含iframe标签时,可根据iframe标签内的url地址,从页面头部表中匹配url地址对应的外部页面的头部标识;在加载外部页面时,可根据头部标识确定外部页面的头部信息,并调整头部信息的css的显示相关属性,以使头部信息不可见,从而避免了当页面内嵌入外部页面时出现多个页面头部信息的问题,因而本申请实施例提高了用户体验。在本方案说明书及权利要求当中所提及的“包括”为一开放式用语,故应解释成“包括但不限定于”。本领域技术人员还可以了解到本方案实施例列出的各种说明性逻辑块、单元和步骤可以通过硬件、软件或两者的结合来实现。至于是通过硬件还是软件来实现取决于特定的应用和整个系统的设计要求。本领域技术人员可以对于每种特定的应用,可以使用各种方法实现所述的功能,但这种实现不应被理解为超出本方案实施例保护的范围。本方案实施例中所描述的各种说明性的逻辑块,或单元都可以通过通用处理器,数字信号处理器,专用集成电路(asic),现场可编程门阵列或其它可编程逻辑装置,离散门或晶体管逻辑,离散硬件部件,或上述任何组合的设计来实现或操作所描述的功能。通用处理器可以为微处理器,可选地,该通用处理器也可以为任何传统的处理器、控制器、微控制器或状态机。处理器也可以通过计算装置的组合来实现,例如数字信号处理器和微处理器,多个微处理器,一个或多个微处理器联合一个数字信号处理器核,或任何其它类似的配置来实现。本方案实施例中所描述方法或算法的步骤可以直接嵌入硬件、处理器执行的软件模块、或者这两者的结合。软件模块可以存储于ram存储器、闪存、rom存储器、eprom存储器、eeprom存储器、寄存器、硬盘、可移动磁盘、cd-rom或本领域中其它任意形式的存储媒介中。示例性地,存储媒介可以与处理器连接,以使得处理器可以从存储媒介中读取信息,并可以向存储媒介存写信息。可选地,存储媒介还可以集成到处理器中。处理器和存储媒介可以设置于asic中,asic可以设置于用户终端中。可选地,处理器和存储媒介也可以设置于用户终端中的不同的部件中。以上所述的具体实施例,对本方案的目的、技术方案和有益效果进行了进一步详细说明,所应理解的是,以上所述仅为本方案实施例的具体实施例而已,并不用于限定本方案的保护范围,凡在本方案的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本方案的保护范围之内。当前第1页12
当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1