CN107229760B - 存储介质、电子装置、网页内容的显示方法和装置 - Google Patents

Abstract

本发明公开了一种存储介质、电子装置、网页内容的显示方法和装置。其中，该方法包括：在计算机终端的网页客户端上接收到目标指令，目标指令用于指示在网页客户端上显示目标网页内容；响应于目标指令，获取目标网页内容；在网页客户端的第一显示窗口内的第一区域上显示目标网页内容，其中，第一区域与移动终端的第二显示窗口具有相同形状，目标网页内容还用于以目标网页内容在第一区域上的显示格式在移动终端的第二显示窗口内显示。本发明解决相关技术中在计算机终端上浏览移动网页时出现乱码的技术问题。

Description

存储介质、电子装置、网页内容的显示方法和装置

技术领域

本发明涉及互联网领域，具体而言，涉及一种存储介质、电子装置、网页内容的显示方法和装置。

背景技术

随着移动互联网的高速发展，给移动通信终端用户打开了一扇通过互联网世界的大门，移动互联网结合了移动通信的便利性和互联网的丰富内容，成为通信业和互联网业融合发展的交叉领域，具有巨大的市场前景。

其中一个表现在于移动端网页的权重越来越高，移动端微官网、微营销、微系统等越来越多，而且都是基于网页形态存在的，在传播宣传过程中用户可以在即时通讯应用、社交应用、微博等平台中传播移动网页，且这些移动网页的形态均是为移动终端定制优化的，但是目前移动端和计算机PC端的信息传播存在互通的必要，移动端页面的链接很可能在PC平台中传播并可以通过链接点击访问移动网页。

由于这些移动网页的形态均是为移动终端定制优化的，但是由于移动终端设备的屏幕分辨率和PC的分辨率不等、操作系统也不尽相同等原因，造成了这些移动网页的兼容性较差，如普通的移动网页使用PC浏览器浏览的效果不好，甚至出现乱码而影响阅读，针对移动端的程序代码交互逻辑在PC端也无法实现，可用性和显示效果均非常差。

针对相关技术中在计算机终端上浏览移动网页时出现乱码的技术问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种存储介质、电子装置、网页内容的显示方法和装置，以至少解决相关技术中在计算机终端上浏览移动网页时出现乱码的技术问题。

根据本发明实施例的一个方面，提供了一种网页内容的显示方法，该变显示方法包括：在计算机终端的网页客户端上接收到目标指令，其中，目标指令用于指示在网页客户端上显示目标网页内容；响应于目标指令，获取目标网页内容；在网页客户端的第一显示窗口内的第一区域上显示目标网页内容，其中，第一区域与移动终端的第二显示窗口具有相同形状，目标网页内容还用于以目标网页内容在第一区域上的显示格式在移动终端的第二显示窗口内显示。

根据本发明实施例的另一方面，还提供了一种网页内容的显示装置，该显示装置包括：接收单元，用于在计算机终端的网页客户端上接收到目标指令，其中，目标指令用于指示在网页客户端上显示目标网页内容；响应单元，用于响应于目标指令，获取目标网页内容；第一显示单元，用于在网页客户端的第一显示窗口内的第一区域上显示目标网页内容，其中，第一区域与移动终端的第二显示窗口具有相同形状，目标网页内容还用于以目标网页内容在第一区域上的显示格式在移动终端的第二显示窗口内显示。

在本发明实施例中，在计算机终端的网页客户端上接收到目标指令(目标指令用于指示在网页客户端上显示目标网页内容)时，获取目标网页内容；在网页客户端的第一显示窗口内的第一区域上显示目标网页内容，该目标网页内容还用于以目标网页内容在第一区域上的显示格式在移动终端的第二显示窗口内显示，通过采用与第一区域相同的显示格式进行内容显示，可以解决相关技术中在计算机终端上浏览移动网页时出现乱码的技术问题，进而达到在计算机终端上完整的复现移动网页的技术效果。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的网页内容的显示方法的硬件环境的示意图；

图2是根据本发明实施例的一种可选的网页内容的显示方法的流程图；

图3是根据本发明实施例的可选的页面整体布局的示意图；

图4是根据本发明实施例的可选的WEB系统的示意图；

图5是根据本发明实施例的可选的DOM树的示意图；

图6是根据本发明实施例的一种可选的网页内容的显示方法的流程图；

图7是根据本发明实施例的可选的移动事件和PC事件的示意图；

图8是根据本发明实施例的可选的生成二维码的示意图；

图9是根据本发明实施例的一种可选的网页内容的显示装置的示意图；以及

图10是根据本发明实施例的一种终端的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

首先，在对本发明实施例进行描述的过程中出现的部分名词或者术语适用于如下解释：

URL：英文全称为Uniform Resoure Locator，即统一资源定位器，统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。

实施例1

根据本发明实施例，提供了一种网页内容的显示方法的方法实施例。

可选地，在本实施例中，上述网页内容的显示方法可以应用于如图1所示的由服务器102和终端104所构成的硬件环境中。如图1所示，服务器102通过网络与终端104进行连接，上述网络包括但不限于：广域网、城域网或局域网，终端104并不限定于PC、手机、平板电脑等。本发明实施例的网页内容的显示方法可以由终端104来执行，还可以是由服务器102和终端104共同执行。其中，终端104执行本发明实施例的网页内容的显示方法也可以是由安装在其上的客户端来执行。

图2是根据本发明实施例的一种可选的网页内容的显示方法的流程图，如图2所示，该方法可以包括以下步骤：

步骤S202，在计算机终端的网页客户端上接收到目标指令，目标指令用于指示在网页客户端上显示目标网页内容。

上述的计算机终端即PC端，PC端可采用Windows、Linux、Mac OSX等系统。

上述的网页客户端为能够在计算机终端上显示网页的客户端，包括但不局限于网页浏览器、媒体应用、社交应用、游戏应用、即时通讯应用。

上述的目标网页内容的形态是为移动终端定制优化过的，此处的定制优化至少包括：1)与移动终端的显示屏幕(或者浏览器的显示区域)尺寸适配；2)目标网页内容的排版方式与移动终端的浏览器中的网页模板适配。

针对上述的目标网页内容，存在一个对应的统一资源定位符URL(即第一链接地址)，上述的目标指令即用于指示访问第一链接地址的指令。

步骤S204，响应于目标指令，获取目标网页内容。

计算机终端在目标指令的触发下，通过HTTPS通讯协议从WEB服务器获取上述的目标网页内容。

步骤S206，在网页客户端的第一显示窗口内的第一区域上显示目标网页内容，第一区域与移动终端的第二显示窗口具有相同形状，目标网页内容还用于以目标网页内容在第一区域上的显示格式在移动终端的第二显示窗口内显示。

上述的第一显示窗口为网页客户端的一个窗口(可以为当前窗口)，第一区域为第一显示窗口的一部分。

需要说明的是，上述的第一区域是移动终端进行网页内容显示的区域，对于任意的移动终端，只要确定了其显示屏幕或者浏览器的显示区域的尺寸大小，那么就可以生成与之相同尺寸的网页模板(相当于第一区域)，该模板中网页内容的排版方式(也即显示方式)与浏览器的用于显示目标网页内容的第二显示窗口的排版方式相同，也可直接采用上述第二显示窗口的网页模板。

也即在本申请中，由于网页模板的尺寸大小和排版方式，与浏览器的显示区域的尺寸大小和排版方式相同，可以直接将目标网页内容的原始数据填充至网页模板中，在第一区域中显示目标网页内容。

可选地，对于上述的网页模板，其物理形状与移动终端的浏览器的显示区域的物理形状相同，其尺寸大小可以是按照指定比例对浏览器的显示区域进行缩小或放大得到的，此时，在网页模板中显示的内容也可按照指定比例缩小或者放大即可，而不用进行排版的调整。

在本申请中，第一显示窗口内的第一区域与第二显示窗口的尺寸相互匹配，此处的匹配包括上述的尺寸和外形相同、外形相同但尺寸成比例关系两种情况。采用这种方式进行显示，可以直接利用用于在移动终端显示目标网页内容的原始数据进行显示，而不需要进行转换，提高显示的效率的同时保证了显示的内容的完整性。

通过上述步骤S202至步骤S206，在计算机终端的网页客户端上接收到目标指令(目标指令用于指示在网页客户端上显示目标网页内容)时，获取目标网页内容；在网页客户端的第一显示窗口内的第一区域上显示目标网页内容，该目标网页内容还用于以目标网页内容在第一区域上的显示格式在移动终端的第二显示窗口内显示，通过采用与第一区域相同的显示格式进行内容显示，可以解决相关技术中在计算机终端上浏览移动网页时出现乱码的技术问题，进而达到在计算机终端上完整的复现移动网页的技术效果。

在本申请的技术方案具备以下几个特征：以PC页面区域渲染载入移动页面保持移动终端大小的方式展现移动页面；以PC页面区域渲染交互行为全真模拟移动端交互事件的方式；以PC页面全真模拟体验并配合二维码对用户进行引导；通过URL对比相对路径的规则将第三方网页数据外链接相对路径转为绝对路径。下面结合步骤S202至步骤S206详述：

在步骤S202提供的技术方案中，在计算机终端的网页客户端上接收到目标指令，针对目标网页内容，存在一个对应第一链接地址，该目标指令包括但不局限于如下的产生方式：

1)当用户在计算机终端点击第一链接地址时产生；

2)从别的网页跳转至目标网页内容时产生。

在步骤S204提供的技术方案中，响应于目标指令，获取目标网页内容。

在获取目标网页内容时，计算机终端可以按照如下方式：获取目标指令所指示的第二链接地址(该第二链接地址可以为上述的第一链接地址，也可以为专用于PC访问目标网页内容的地址)，第二链接地址为目标网页内容的来源地址；终端发送内容请求至第二链接地址所指示的网页服务器，内容请求用于向网页服务器请求目标网页内容；接收网页服务器响应内容请求所返回的目标网页内容。下面结合如下的子步骤进行详述：

步骤S2042，判断设备UA。

UA的英文全称为User Agent，中文名为用户代理，它是一个特殊字符串头，使得服务器能够识别客户端使用的操作系统类型及版本、CPU类型、浏览器类型及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。

在终端的客户端上，通过预先适配的javascript引擎，获取设备UA信息，从而便于客户端或者服务器判断是移动终端还是PC终端。

一种可选的UA判断终端类型的方法如下，若UA中存在字符串android、iphone、ipad则设定用户访问该页面的设备为苹果或安卓移动终端设备。对于其他类型的设备，也可以类似的方式根据其UA标志字符串来判断具体的终端设备类型。

步骤S2044，若为PC终端则跳转到PC页面地址。

若根据UA判断出需要显示移动网页(即目标网页内容)的终端为PC终端，则跳转到PC页面数据转换页面地址，该页面是随机生成的一个页面，页面整体布局如图3所示，包括第一显示窗口(即网页模板)和第二显示窗口，第一区域用于显示移动网页，第二区域用于显示有该移动网页的链接地址的二维码。

可选地，第二区域与第一区域包括但不局限于如下形式：

(1)第二区域和第一区域为相互独立的两个区域；

(2)第二区域部分或全部地与第一区域重合，但是第二区域以半透明或全透明的方式显示，避免对第一区域内的显示内容造成干扰。

步骤S2046，获取移动网页数据文件。

可以预先编写好用于获取UA的javascript代码，并将编写好的代码保存为一个HTML文件，在HTML文件的“<body>”处加上JS事件(即允许加载上述的javascript代码中所执行的事件)，以让上面的JS事件运行。

在JS事件执行时，通过javascript获取来路url(即目标页面内容的来路页面的URL)，通过ajax请求来请求该来路url获取这个页面的HTML字符串数据信息。

可选地，可以用“document.referrer”方法来路url；可使用javascript向服务器提出请求(XMLHTTPRequest，也即内容请求)，通过这个请求，JavaScript可在不重载页面的情况与Web服务器交换数据。

在执行步骤S2046时，如图4所示，当用户在WEB网页界面点击网页链接时，调用AJAX引擎来获取网页内容，AJAX引擎通过XML HttpRequest向WEB服务器发起请求，WEB服务器的Servlet(全称为Server Applet)模块对请求进行响应，从数据库查询到对应的网页数据并生成动态WEB内容(即网页内容)，并将生成的网页内容返回给AJAX引擎，触发回调函数利用网页内容对WEB界面显示的内容进行更新，具体是直接将网页内容的原始数据填充到第一区域的网页模板中。

可选地，在网页内容发生更新时，传统的网页(不使用AJAX)如果需要更新内容，必须重载整个网页页面。在本申请中，AJAX在浏览器与Web服务器之间使用异步数据传输，这样就可使网页从服务器请求少量的信息，而不是整个页面，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，从而可以降低流量消耗。

在步骤S206提供的技术方案中，在网页客户端的第一显示窗口内的第一区域上显示目标网页内容，其中，目标网页内容还用于以目标网页内容在第一区域上的显示格式在移动终端的第二显示窗口内显示。

上述的将目标网页内容显示到第一区域，即利用目标网页内容渲染到网页模板(也即PC页面模拟框)。

获取请求到的HTML字符串数据，字符串转换为DOM树(一种可选的网页内容的DOM树如图5所示)模拟渲染到模拟框中，再通过利用DOM树的特点，找出所有外链接，匹配来路URl和外链接路径，将这个请求过来移动页面的外部链接由相对路径全部转换为相对路径。

一种可选的网页内容的DOM树如图5和如下的代码所示：

上述的“<>”相当于定义一个元素，如“<html>”相当于定义根源素html，“</>”相当于表示一个元素的子节点到此为止，如“</html>”表示根源素html的终结，以后定义的元素不再是其子节点。

上述的文本包括元素“title”的“HTML DOM”、元素h1的“DOM的结构”、元素body的“链接”。另外，还定义了属性href的值为“href”。

需要说明的是，DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的接口，使得可以访问页面中其他的标准组件。简单理解，DOM解决了Netscape的javascript和Microsoft的javascript之间的冲突，给予web设计师和开发者一个标准的方法，来访问他们站点中的数据、脚本和表现层对象。

通过使用DOM树，可以直接从目标网页内容中原始数据中获取相应的内容来填充至网页模板中进行渲染和显示。

可选地，在网页客户端的第一显示窗口内的第一区域上显示目标网页内容的同时或之后，在计算机终端上检测到第一事件；按照预设关系确定与第一事件对应的第二事件，预设关系中保存有在计算机终端上触发的事件与在移动终端上触发的事件之间的对应关系，在移动终端上触发的第二事件用于指示在第二显示窗口中执行任务；在第一显示窗口中执行第二事件所指示执行的任务。

上述的第一事件即用户在计算机终端上通过输入设备(如键盘、鼠标、摄像头等)触发的事件，也即，在计算机终端上，可以将在计算机终端上触发的事件转换为在移动终端上触发的事件，而不用改变网页本申请的交互逻辑，即可实现网页与用户之间的交互。

可选地，按照预设关系确定与第一事件对应的第二事件包括以下几种情况：

(1)在第一事件为在第一显示窗口的输入控件中通过键盘输入内容的事件时，根据预设关系确定与第一事件对应的第二事件，第二事件为在第二显示窗口的输入控件中通过触控操作输入内容的事件，如在搜索栏输入搜索关键词、在评价栏输入评价信息等。

(2)在第一事件为在第一显示窗口中通过鼠标触发的事件时(如在图3中点击“上一屏”或“下一屏幕”的事件)，根据预设关系确定与第一事件对应的第二事件，第二事件为在第二显示窗口中通过触控操作进行内容切换的事件，如在手机屏幕上的滑动。

(3)在第一事件为通过第一显示窗口中的虚拟按钮触发的事件(如窗口中修改排版格式、字体、字体颜色的按钮，或者调整显示方向的按钮等)时，根据预设关系确定与第一事件对应的第二事件，第二事件为在移动终端上触发的用于修改目标网页内容的内容属性的事件，如在设置中的显示方式调整、排版格式、字体、字体颜色等。

对应的，在第一显示窗口中执行第二事件所指示执行的任务包括以下即种情况：

(1)在第一事件为鼠标或者键盘触发的调整当前显示的网页内容的事件时，在第一显示窗口中执行与第一事件对应的第一任务，以将第一显示窗口内显示的网页内容从第一网页内容调整为第二网页内容，目标网页内容包括第一网页内容和第二网页内容，第一网页内容和第二网页内容不完全相同。

(2)在第一事件为鼠标或者键盘触发的调整内容属性的事件时，在第一显示窗口中执行与第一事件对应的第二任务，以更改第一显示窗口内显示的目标网页内容的内容属性，内容属性包括目标网页内容字体、字号、颜色以及排版方式。

(3)在第一事件为鼠标或者键盘触发的输入信息的事件时，在第一显示窗口中执行第三任务，以从第一显示窗口的输入控件中获取输入的内容，输入控件用于输入内容。

可选地，在网页客户端的第一显示窗口内的第一区域上显示目标网页内容的同时或之后，在第一显示窗口内的第二区域内显示图像信息，图像信息中携带有用于在移动终端上获取网页内容的第一链接地址。

如图3所示，在第二区域显示二维码的图片，在用户浏览的同时，可通过扫描该二维码图片在移动终端上进行浏览。

本申请提供了一种在PC端浏览移动网页的方案，通过构建一个PC页面平台，在PC页面中设定一个移动终端(如手机、平板灯)大小的显示框，并将所访问的移动页面整体请求并注入该显示框中，使在移动终端设备显示的小屏页面在PC显示框中显示，通过将PC事件转换为移动网页事件，使原有移动端的交互得以还原，还可在右侧生成移动页面网址二维码引导用户通过手机扫码进入移动网页。通过该方案提升了移动页面在PC端的可访问性与用户体验，并且引导用户手机扫码进入移动页面，增加网页入口，降低了传播过程中的跳出率。

本发明还提供了一种优选实施例，该优选实施例如图6所示：

场景说明，对于在手机上显示移动网页(也即目标网页内容)，需要在PC端进行显示：

步骤S602，PC终端上的网页客户端根据UA判断终端类型，即判断是手机还是PC端，若是PC端则跳转到PC页面地址(也即上述的第一链接地址)。

步骤S604，客户端发送内容请求到WEB服务器，并接收服务器响应该请求所返回的移动页面(也即网页数据文件或目标网页内容的原始数据)。

步骤S606，将得到的网页数据文件渲染到PC页面模拟框。

步骤S608，检测到用户的PC事件。

步骤S610，将PC事件转换为移动事件。

(1)对于移动端的oninput事件(输入事件)，如图7所示：

oninput事件：当用户向“<input>”中尝试输入时执行对应的JavaScript，oninput事件在用户输入时触发，如在“<input>”或“<textarea>”元素的值发生改变时触发。

对于上述的oninput事件可以用计算机的键盘相关的事件来替代，如onkeyPress事件、onkeyUp事件以及onkeyDown事件。

onkeyPress事件在用户按下并放开任何字母数字键时发生。

onkeyUp事件在用户放开任何先前按下的键盘键时发生。

onkeyDown事件在用户按下任何键盘键(包括系统按钮，如箭头键和功能键)时发生。

(2)对于移动端的触控事件

touchstart事件，当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件，当手指在屏幕上滑动的时候连续地触发，在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件，当手指从屏幕上离开的时候触发。

对于上述移动终端上的事件，可分别用电脑端的如下事件替代：

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件。与click事件不同，mousedown事件仅需要按键被按下，而不需要松开即可发生。可用于替代touchstart事件。

当鼠标指针在指定的元素中移动时，就会发生mousemove事件。mousemove()方法可用于触发mousemove事件，可规定当发生mousemove事件时运行的函数。

当点击元素时，会发生click事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次click。click()方法触发click事件，可规定当发生click事件时运行的函数。

mousemove事件或mousemove事件和click事件的结合可用于替代touchmove事件。

当在元素上放松鼠标按钮时，会发生mouseup事件。与click事件不同，mouseup事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。mouseup()方法触发mouseup事件，可规定当发生mouseup事件时运行的函数。mouseup事件可用于替代touchend事件。

Devicemotion事件能够提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标，其还提供了设备在坐标系中的自转速率。

在浏览器中，往往能够通过devicemotion事件确定移动终端的朝向或者倾斜方向，以调整浏览器的窗口方向，从而保证用户能够正确阅读网页内容。

对于Devicemotion事件，可以在电脑端设置虚拟按钮，用户可以通过点击虚拟按钮实现浏览器的窗口方向的调整。

步骤S612，生成并注入二维码到第二区域。

jquery.qrcode.js是一个能够在客户端生成矩阵二维码QRCode的jquery插件，使用它可以很方便的在页面上生成二维条码。

如图8所示，具体可利用jquery插件对网址进行处理，生成对应的二维码返回给网页客户端，并渲染到PC页面(即第一显示窗口)的指定区域(即第二区域)。

此插件是能够独立使用的，体积也比较小，因为它是直接在客户端生成的条码，所以不会有图片下载的过程，能够实现快速生成，它是基于一个多语言的类库封装的，也不依赖于其他额外的服务。因此，利用该插件能够快速生成二维码，且不会对网页加载造成多余影响。

在本申请的实施例中，通过构建一个PC页面平台，在PC页面中设定一个移动终端(如手机)大小的显示框(第一区域)，并将访问的手机页面进行整体请求并注入该框中，使在移动终端设备显示的小屏页面在PC显示框中显示，通过重置移动网页事件转换为PC事件使原有移动端交互还原，通过在右侧生成移动页面网址二维码引导用户可以通过手机扫码进入。该优化方案提升了移动页面在PC端的可访问性与用户体验，并且引导用户手机扫码进入移动页面，增加网页入口，降低传播过程中的跳出率。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

实施例2

根据本发明实施例，还提供了一种用于实施上述网页内容的显示方法的网页内容的显示装置。图9是根据本发明实施例的一种可选的网页内容的显示装置的示意图，如图9所示，该装置可以包括：接收单元92、响应单元94以及第一显示单元96。

接收单元92，用于在计算机终端的网页客户端上接收到目标指令，目标指令用于指示在网页客户端上显示目标网页内容。

上述的计算机终端即PC端，PC端可采用Windows、Linux、Mac OSX等系统。

上述的网页客户端为能够在计算机终端上显示网页的客户端，包括但不局限于网页浏览器、媒体应用、社交应用、游戏应用、即时通讯应用。

上述的目标网页内容的形态是为移动终端定制优化过的，此处的定制优化至少包括：1)与移动终端的显示屏幕(或者浏览器的显示区域)尺寸适配；2)目标网页内容的排版方式与移动终端的浏览器中的网页模板适配。

针对上述的目标网页内容，存在一个对应的统一资源定位符URL(即第一链接地址)，上述的目标指令即用于指示访问第一链接地址的指令。

响应单元94，用于响应于目标指令，获取目标网页内容。

计算机终端在目标指令的触发下，通过HTTPS通讯协议从WEB服务器获取上述的目标网页内容。

第一显示单元96，用于在网页客户端的第一显示窗口内的第一区域上显示目标网页内容，其中，目标网页内容还用于以目标网页内容在第一区域上的显示格式在移动终端的第二显示窗口内显示。

上述的第一显示窗口为网页客户端的一个窗口(可以为当前窗口)，第一区域为第一显示窗口的一部分。

需要说明的是，上述的第一区域是与移动终端视频的区域，对于任意的移动终端，只要确定了其显示屏幕或者浏览器的显示区域的尺寸大小，那么就可以生成与之相同尺寸的网页模板(相当于第一区域)，该模板中网页内容的排版方式与浏览器的用于显示目标网页内容的第二显示窗口的排版方式相同，也可直接采用上述第二显示窗口的网页模板。

也即在本申请中，由于网页模板的尺寸大小和排版方式，与浏览器的显示区域的尺寸大小和排版方式相同，可以直接将目标网页内容的原始数据填充至网页模板中，在第一区域中显示目标网页内容。

可选地，对于上述的网页模板，其物理形状与移动终端的浏览器的显示区域的物理形状相同，其尺寸大小可以是按照指定比例对浏览器的显示区域进行缩小或放大得到的，此时，在网页模板中显示的内容也可按照指定比例缩小或者放大即可，而不用进行排版的调整。

在本申请中，第一显示窗口内的第一区域与第二显示窗口的尺寸相互匹配，此处的匹配包括上述的尺寸和外形相同、外形相同但尺寸成比例关系两种情况。采用这种方式进行显示，可以直接利用用于在移动终端显示目标网页内容的原始数据进行显示，而不需要进行转换，提高显示的效率的同时保证了显示的内容的完整性。

需要说明的是，该实施例中的接收单元92可以用于执行本申请实施例1中的步骤S202，该实施例中的响应单元94可以用于执行本申请实施例1中的步骤S204，该实施例中的第一显示单元96可以用于执行本申请实施例1中的步骤S206。

此处需要说明的是，上述模块与对应的步骤所实现的示例和应用场景相同，但不限于上述实施例1所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在如图1所示的硬件环境中，可以通过软件实现，也可以通过硬件实现。

通过上述模块，在计算机终端的网页客户端上接收到目标指令(目标指令用于指示在网页客户端上显示目标网页内容)时，获取目标网页内容；在网页客户端的第一显示窗口内的第一区域上显示目标网页内容，该目标网页内容还用于以目标网页内容在第一区域上的显示格式在移动终端的第二显示窗口内显示，通过采用与第一区域相同的显示格式进行内容显示，可以解决相关技术中在计算机终端上浏览移动网页时出现乱码的技术问题，进而达到在计算机终端上完整的复现移动网页的技术效果。

可选地，响应单元包括：获取模块，用于获取目标指令所指示的第二链接地址，其中，第二链接地址为目标网页内容的来源地址；发送模块，用于发送内容请求至第二链接地址所指示的网页服务器，其中，内容请求用于向网页服务器请求目标网页内容；接收模块，用于接收网页服务器响应内容请求所返回的目标网页内容。

可选地，本申请的装置还可以包括：第二显示单元，用于在网页客户端的第一显示窗口内的第一区域上显示目标网页内容的同时或之后，在第一显示窗口内的第二区域内显示图像信息，其中，图像信息中携带有用于在移动终端上获取网页内容的第一链接地址。

可选地，本申请的装置还可以包括：检测单元，用于在网页客户端的第一显示窗口内的第一区域上显示目标网页内容的同时或之后，在计算机终端上检测到第一事件；确定单元，用于按照预设关系确定与第一事件对应的第二事件，其中，预设关系中保存有在计算机终端上触发的事件与在移动终端上触发的事件之间的对应关系，在移动终端上触发的第二事件用于指示在第二显示窗口中执行任务；执行单元，用于在第一显示窗口中执行第二事件所指示执行的任务。

可选地，执行单元包括：第一执行模块，用于在第一显示窗口中执行第一任务，以将第一显示窗口内显示的网页内容从第一网页内容调整为第二网页内容，其中，目标网页内容包括第一网页内容和第二网页内容，第一网页内容和第二网页内容不完全相同；第二执行模块，用于在第一显示窗口中执行第二任务，以更改第一显示窗口内显示的目标网页内容的内容属性，其中，内容属性包括目标网页内容字体、字号、颜色以及排版方式；第三执行模块，用于在第一显示窗口中执行第三任务，以从第一显示窗口的输入控件中获取输入的内容，其中，输入控件用于输入内容。

可选地，确定单元包括：第一确定模块，用于在第一事件为在第一显示窗口的输入控件中通过键盘输入内容的事件时，根据预设关系确定与第一事件对应的第二事件，其中，第二事件为在第二显示窗口的输入控件中通过触控操作输入内容的事件；第二确定模块，用于在第一事件为在第一显示窗口中通过鼠标触发的事件时，根据预设关系确定与第一事件对应的第二事件，其中，第二事件为在第二显示窗口中通过触控操作进行内容切换的事件；第三确定模块，用于在第一事件为通过第一显示窗口中的虚拟按钮触发的事件时，根据预设关系确定与第一事件对应的第二事件，其中，第二事件为在移动终端上触发的用于修改目标网页内容的内容属性的事件。

本申请提供了一种在PC端浏览移动网页的方案，通过构建一个PC页面平台，在PC页面中设定一个移动终端(如手机、平板灯)大小的显示框，并将所访问的移动页面整体请求并注入该显示框中，使在移动终端设备显示的小屏页面在PC显示框中显示，通过将PC事件转换为移动网页事件，使原有移动端的交互得以还原，还可在右侧生成移动页面网址二维码引导用户通过手机扫码进入移动网页。通过该方案提升了移动页面在PC端的可访问性与用户体验，并且引导用户手机扫码进入移动页面，增加网页入口，降低了传播过程中的跳出率。

在上述装置实施例中，所涉及的模块或单元与前述方法实施例中的方法步骤对应，本实施例中的模块或单元的具体实施方式可参照前述方法实施例中对应的方法步骤的实施方式，在此不再赘述。

此处需要说明的是，上述模块与对应的步骤所实现的示例和应用场景相同，但不限于上述实施例1所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在如图1所示的硬件环境中，可以通过软件实现，也可以通过硬件实现，其中，硬件环境包括网络环境。

实施例3

根据本发明实施例，还提供了一种用于实施上述网页内容的显示方法的服务器或终端(也即电子装置)。

图10是根据本发明实施例的一种终端的结构框图，如图10所示，该终端可以包括：一个或多个(图10中仅示出一个)处理器1001、存储器1003、以及传输装置1005(如上述实施例中的发送装置)，如图10所示，该终端还可以包括输入输出设备1007。

其中，存储器1003可用于存储软件程序以及模块，如本发明实施例中的网页内容的显示方法和装置对应的程序指令/模块，处理器1001通过运行存储在存储器1003内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的网页内容的显示方法。存储器1003可包括高速随机存储器，还可以包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器1003可进一步包括相对于处理器1001远程设置的存储器，这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

上述的传输装置1005用于经由一个网络接收或者发送数据，还可以用于处理器与存储器之间的数据传输。上述的网络具体实例可包括有线网络及无线网络。在一个实例中，传输装置1005包括一个网络适配器(Network Interface Controller，NIC)，其可通过网线与其他网络设备与路由器相连从而可与互联网或局域网进行通讯。在一个实例中，传输装置1005为射频(Radio Frequency，RF)模块，其用于通过无线方式与互联网进行通讯。

其中，具体地，存储器1003用于存储应用程序。

处理器1001可以通过传输装置1005调用存储器1003存储的应用程序，以执行下述步骤：在计算机终端的网页客户端上接收到目标指令，其中，目标指令用于指示在网页客户端上显示目标网页内容；响应于目标指令，获取目标网页内容；在网页客户端的第一显示窗口内的第一区域上显示目标网页内容，其中，目标网页内容还用于以目标网页内容在第一区域上的显示格式在移动终端的第二显示窗口内显示。

处理器1001还用于执行下述步骤：在第一事件为在第一显示窗口的输入控件中通过键盘输入内容的事件时，根据预设关系确定与第一事件对应的第二事件，其中，第二事件为在第二显示窗口的输入控件中通过触控操作输入内容的事件；在第一事件为在第一显示窗口中通过鼠标触发的事件时，根据预设关系确定与第一事件对应的第二事件，其中，第二事件为在第二显示窗口中通过触控操作进行内容切换的事件；在第一事件为通过第一显示窗口中的虚拟按钮触发的事件时，根据预设关系确定与第一事件对应的第二事件，其中，第二事件为在移动终端上触发的用于修改目标网页内容的内容属性的事件。

采用本发明实施例，在计算机终端的网页客户端上接收到目标指令(目标指令用于指示在网页客户端上显示目标网页内容)时，获取目标网页内容；在网页客户端的第一显示窗口内的第一区域上显示目标网页内容，该目标网页内容还用于以目标网页内容在第一区域上的显示格式在移动终端的第二显示窗口内显示，通过采用与第一区域相同的显示格式进行内容显示，可以解决相关技术中在计算机终端上浏览移动网页时出现乱码的技术问题，进而达到在计算机终端上完整的复现移动网页的技术效果。

可选地，本实施例中的具体示例可以参考上述实施例1和实施例2中所描述的示例，本实施例在此不再赘述。

本领域普通技术人员可以理解，图10所示的结构仅为示意，终端可以是智能手机(如Android手机、iOS手机等)、平板电脑、掌上电脑以及移动互联网设备(Mobile InternetDevices，MID)、PAD等终端设备。图10其并不对上述电子装置的结构造成限定。例如，终端还可包括比图10中所示更多或者更少的组件(如网络接口、显示装置等)，或者具有与图10所示不同的配置。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令终端设备相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：闪存盘、只读存储器(Read-Only Memory，ROM)、随机存取器(RandomAccess Memory，RAM)、磁盘或光盘等。

实施例4

本发明的实施例还提供了一种存储介质。可选地，在本实施例中，上述存储介质可以用于执行网页内容的显示方法的程序代码。

可选地，在本实施例中，上述存储介质可以位于上述实施例所示的网络中的多个网络设备中的至少一个网络设备上。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：

S11，在计算机终端的网页客户端上接收到目标指令，其中，目标指令用于指示在网页客户端上显示目标网页内容；

S12，响应于目标指令，获取目标网页内容；

S13，在网页客户端的第一显示窗口内的第一区域上显示目标网页内容，其中，第一区域与移动终端的第二显示窗口具有相同形状，目标网页内容还用于以目标网页内容在第一区域上的显示格式在移动终端的第二显示窗口内显示。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：

S21，在第一事件为在第一显示窗口的输入控件中通过键盘输入内容的事件时，根据预设关系确定与第一事件对应的第二事件，第二事件为在第二显示窗口的输入控件中通过触控操作输入内容的事件；

S22，在第一事件为在第一显示窗口中通过鼠标触发的事件时，根据预设关系确定与第一事件对应的第二事件，第二事件为在第二显示窗口中通过触控操作进行内容切换的事件；

S23，在第一事件为通过第一显示窗口中的虚拟按钮触发的事件时，根据预设关系确定与第一事件对应的第二事件，第二事件为在移动终端上触发的用于修改目标网页内容的内容属性的事件。

可选地，本实施例中的具体示例可以参考上述实施例1和实施例2中所描述的示例，本实施例在此不再赘述。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在上述计算机可读取的存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在存储介质中，包括若干指令用以使得一台或多台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的客户端，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (12)

1.一种网页内容的显示方法，其特征在于，包括：

在计算机终端的网页客户端上接收到目标指令，其中，所述目标指令用于指示在所述网页客户端上显示目标网页内容；

响应于所述目标指令，获取所述目标网页内容；

在所述网页客户端的第一显示窗口内的第一区域上显示所述目标网页内容，其中，所述第一区域与移动终端的第二显示窗口具有相同形状，所述目标网页内容还用于以所述目标网页内容在所述第一区域上的显示格式在所述移动终端的第二显示窗口内显示；

其中，在所述网页客户端的第一显示窗口内的第一区域上显示所述目标网页内容的同时或之后，所述方法还包括：在所述第一显示窗口内的第二区域内显示图像信息，其中，所述图像信息中携带有用于在所述移动终端上获取所述网页内容的第一链接地址。

2.根据权利要求1所述的方法，其特征在于，在所述网页客户端的第一显示窗口内的第一区域上显示所述目标网页内容的同时或之后，所述方法还包括：

在所述计算机终端上检测到第一事件；

按照预设关系确定与所述第一事件对应的第二事件，其中，所述预设关系中保存有在所述计算机终端上触发的事件与在所述移动终端上触发的事件之间的对应关系，在所述移动终端上触发的所述第二事件用于指示在所述第二显示窗口中执行任务；

在所述第一显示窗口中执行所述第二事件所指示执行的任务。

3.根据权利要求2所述的方法，其特征在于，在所述第一显示窗口中执行所述第二事件所指示执行的任务包括：

在所述第一显示窗口中执行第一任务，以将所述第一显示窗口内显示的网页内容从第一网页内容调整为第二网页内容，其中，所述目标网页内容包括所述第一网页内容和所述第二网页内容，所述第一网页内容和所述第二网页内容不完全相同；

在所述第一显示窗口中执行第二任务，以更改所述第一显示窗口内显示的所述目标网页内容的内容属性；

在所述第一显示窗口中执行第三任务，以从所述第一显示窗口的输入控件中获取输入的内容，其中，所述输入控件用于输入内容。

4.根据权利要求2所述的方法，其特征在于，按照预设关系确定与所述第一事件对应的第二事件包括：

在所述第一事件为在所述第一显示窗口的输入控件中通过键盘输入内容的事件时，根据所述预设关系确定与所述第一事件对应的所述第二事件，其中，所述第二事件为在所述第二显示窗口的输入控件中通过触控操作输入内容的事件；

在所述第一事件为在所述第一显示窗口中通过鼠标触发的事件时，根据所述预设关系确定与所述第一事件对应的所述第二事件，其中，所述第二事件为在所述第二显示窗口中通过触控操作进行内容切换的事件；

在所述第一事件为通过所述第一显示窗口中的虚拟按钮触发的事件时，根据所述预设关系确定与所述第一事件对应的所述第二事件，其中，所述第二事件为在所述移动终端上触发的用于修改所述目标网页内容的内容属性的事件。

5.根据权利要求1所述的方法，其特征在于，获取所述目标网页内容包括：

获取所述目标指令所指示的第二链接地址，其中，所述第二链接地址为所述目标网页内容的来源地址；

发送内容请求至所述第二链接地址所指示的网页服务器，其中，所述内容请求用于向所述网页服务器请求所述目标网页内容；

接收所述网页服务器响应所述内容请求所返回的所述目标网页内容。

6.一种网页内容的显示装置，其特征在于，包括：

接收单元，用于在计算机终端的网页客户端上接收到目标指令，其中，所述目标指令用于指示在所述网页客户端上显示目标网页内容；

响应单元，用于响应于所述目标指令，获取所述目标网页内容；

第一显示单元，用于在所述网页客户端的第一显示窗口内的第一区域上显示所述目标网页内容，其中，所述第一区域与移动终端的第二显示窗口具有相同形状，所述目标网页内容还用于以所述目标网页内容在所述第一区域上的显示格式在所述移动终端的第二显示窗口内显示；

第二显示单元，用于在所述网页客户端的第一显示窗口内的第一区域上显示所述目标网页内容的同时或之后，在所述第一显示窗口内的第二区域内显示图像信息，其中，所述图像信息中携带有用于在所述移动终端上获取所述网页内容的第一链接地址。

7.根据权利要求6所述的装置，其特征在于，所述装置还包括：

检测单元，用于在所述网页客户端的第一显示窗口内的第一区域上显示所述目标网页内容的同时或之后，在所述计算机终端上检测到第一事件；

确定单元，用于按照预设关系确定与所述第一事件对应的第二事件，其中，所述预设关系中保存有在所述计算机终端上触发的事件与在所述移动终端上触发的事件之间的对应关系，在所述移动终端上触发的所述第二事件用于指示在所述第二显示窗口中执行任务；

执行单元，用于在所述第一显示窗口中执行所述第二事件所指示执行的任务。

8.根据权利要求7所述的装置，其特征在于，所述执行单元包括：

第一执行模块，用于在所述第一显示窗口中执行第一任务，以将所述第一显示窗口内显示的网页内容从第一网页内容调整为第二网页内容，其中，所述目标网页内容包括所述第一网页内容和所述第二网页内容，所述第一网页内容和所述第二网页内容不完全相同；

第二执行模块，用于在所述第一显示窗口中执行第二任务，以更改所述第一显示窗口内显示的所述目标网页内容的内容属性，其中，所述内容属性包括所述目标网页内容字体、字号、颜色以及排版方式；

第三执行模块，用于在所述第一显示窗口中执行第三任务，以从所述第一显示窗口的输入控件中获取输入的内容，其中，所述输入控件用于输入内容。

9.根据权利要求7所述的装置，其特征在于，所述确定单元包括：

第一确定模块，用于在所述第一事件为在所述第一显示窗口的输入控件中通过键盘输入内容的事件时，根据所述预设关系确定与所述第一事件对应的所述第二事件，其中，所述第二事件为在所述第二显示窗口的输入控件中通过触控操作输入内容的事件；

第二确定模块，用于在所述第一事件为在所述第一显示窗口中通过鼠标触发的事件时，根据所述预设关系确定与所述第一事件对应的所述第二事件，其中，所述第二事件为在所述第二显示窗口中通过触控操作进行内容切换的事件；

第三确定模块，用于在所述第一事件为通过所述第一显示窗口中的虚拟按钮触发的事件时，根据所述预设关系确定与所述第一事件对应的所述第二事件，其中，所述第二事件为在所述移动终端上触发的用于修改所述目标网页内容的内容属性的事件。

10.根据权利要求6所述的装置，其特征在于，所述响应单元包括：

获取模块，用于获取所述目标指令所指示的第二链接地址，其中，所述第二链接地址为所述目标网页内容的来源地址；

发送模块，用于发送内容请求至所述第二链接地址所指示的网页服务器，其中，所述内容请求用于向所述网页服务器请求所述目标网页内容；

接收模块，用于接收所述网页服务器响应所述内容请求所返回的所述目标网页内容。

11.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，所述程序运行时执行所述权利要求1至5中任一项所述的方法。

12.一种电子装置，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器通过所述计算机程序执行所述权利要求1至5中任一项所述的方法。