一种动态改变页面的方法及装置与流程

本申请涉及通信技术领域，特别涉及一种动态改变页面的方法及装置。

背景技术：

如图5所示为现有技术中页面处理的流程示意图，在现有技术中浏览器将用户的请求发送给应用系统进行业务处理，应用系统输出超文本标记语言(HTML)传回到浏览器，由浏览器进行渲染显示。

现有技术不能根据用户个性化的需求提供相应的页面，一成不变的HTML页面使得用户体验不高。

文档对象模型(DOM)节点构成了传统的HTML页面，一个或者多个DOM节点构成了页面片段，开发人员可以修改页面片段，在浏览器运行页面时显示出不同的页面。但是，上述修改都基于页面代码编写，在不同页面中需要进行单独的修改和编写代码，灵活度不高，并且人力成本较高。

技术实现要素：

本申请实施例的目的是提供一种动态改变页面的方法及装置，在于向用户提供能够根据用户个性信息动态改变的页面，以提高用户使用体验。

本申请提供了一种动态改变页面方法，包括，

获取原始HTML；

获取页面渲染规则和用户上下文信息；

根据所述用户上下文信息得到相应的页面渲染规则；

根据所述相应的页面渲染规则调整所述原始HTML中的文档对象模型页面片段，形成优化后的HTML。

根据本申请所述方法的一个进一步的方面，所述页面渲染规则包括，判断条件部分和执行处理部分。

根据本申请所述方法的再一个进一步的方面，所述用户上下文信息至少包括以下内容之一：用户在用户端计算机上输入的信息，用户本机缓存中存储的信息，远端服务器存储的用户历史信息。

根据本申请所述方法的又一个进一步的方面，根据所述相应的页面渲染规则调整所述原始HTML中的页面片段至少包括以下处理之一，根据所述相应的页面渲染规则删除特定的页面片段、根据所述相应的页面渲染规则调整页面片段的层叠样式表CSS、根据所述相应的页面渲染规则调节页面片段的顺序、根据所述相应的页面渲染规则增加页面片段、根据所述相应的页面渲染规则调节页面片段的属性。

根据本申请所述方法的又一个进一步的方面，在形成优化后的HTML之后还包括，用户端计算机的浏览器显示所述优化后的HTML。

本申请实施例还提供了一种动态改变页面装置，包括，

接收单元，用于获取原始HTML；

获取单元，用于获取页面渲染规则和用户上下文信息；

匹配单元，用于根据所述用户上下文信息得到相应的页面渲染规则；

处理单元，用于根据所述相应的页面渲染规则调整所述原始HTML中的页面片段，形成优化后的HTML。

根据本申请所述装置的一个进一步的方面，所述页面渲染规则包括，判断条件部分和执行处理部分。

根据本申请所述装置的再一个进一步的方面，所述用户上下文信息至少包括以下内容之一：用户在用户端计算机上输入的信息；还包括用户本机缓存中存储的信息；还包括远端服务器存储的用户信息。

根据本申请所述装置的另一个进一步的方面，根据所述相应的页面渲染规则调整所述原始HTML中的文档对象模型页面片段至少包括以下处理之一，根据所述相应的页面渲染规则删除特定的页面片段、根据所述相应的页面渲染规则调整页面片段的层叠样式表CSS、根据所述相应的页面渲染规则调节页面片段的顺序、根据所述相应的页面渲染规则增加页面片段、根据所述相应的页面渲染规则调节页面片段的属性。

根据本申请所述装置的另一个进一步的方面，所述动态改变页面装置位于用户端计算机或者位于应用系统服务器。

由以上本申请实施例提供的技术方案可见，可以针对用户的个性化信息(用户上下文信息)为客户生成个性化的页面，能够精准的为客户提供体验更好的服务。

当然实施本申请的任一产品或者方法必不一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术 描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1所示为本申请实施例一种动态改变页面方法的流程图；

图2所示为本申请实施例一种动态改变页面装置的结构示意图；

图3所示为本申请实施例一种动态改变页面方法的具体流程图；

图4所示为本申请实施例另一种动态改变页面方法的流程图；

图5所示为现有技术中页面处理的流程示意图。

具体实施方式

本申请实施例提供一种动态改变页面的方法及装置。

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

如图1所示为本申请实施例一种动态改变页面方法的流程图。

包括步骤101，获取原始HTML。

步骤102，获取页面渲染规则和用户上下文信息。

步骤103，根据所述用户上下文信息得到相应的页面渲染规则。

步骤104，根据所述相应的页面渲染规则调整所述原始HTML中的页面片段，形成优化后的HTML。

作为本申请的一个实施例，所述页面渲染规则包括，判断条件部分和执行处理部分。例如，判断条件部分为，如果登录用户为支付宝用户；执行处理部分为，优先显示显示支付宝的页面片段。其中，一个或者多个DOM节点构成了页面片段，调整页面片段也就是调整一个或者多个DOM节点。

作为本申请的一个实施例，所述用户上下文信息至少包括以下内容之一：用户在用户端计算机上输入的信息，例如包括用户名、支付方式、地址、电话等内容；还包括用户本机缓存中存储的信息，例如包括用户的环境信息(如计算机配置、浏览器类型)；还包括远端服务器存储的用户信息，所述用户信息至少包括以下信息之一，用户的基本信息(年龄、性别、年薪、地址等)、用户的登录信息(用户名、密码、登录地理位置等)、用户的交易信息(如历史交易中使用的支付方式、基于交易数据的分析等)、用户的行为信息(如交易金额、交 易频次等)、全局信息(例如基于所有用户的交易数据分析等)。

作为本申请的一个实施例，根据所述相应的页面渲染规则调整所述原始HTML中的页面片段至少包括以下处理之一，根据所述相应的页面渲染规则删除特定的页面片段、根据所述相应的页面渲染规则调整页面片段的层叠样式表(CSS)、根据所述相应的页面渲染规则调节页面片段的顺序、根据所述相应的页面渲染规则增加页面片段、根据所述相应的页面渲染规则调节页面片段的属性等。

作为本申请的一个实施例，在形成优化后的HTML之后还包括，用户端计算机的浏览器显示所述优化后的HTML。

本申请所述的动态改变页面方法可以运行于用户端计算机，也可以运行于应用系统端服务器中。

通过上述本申请的实施例，可以针对用户的个性化信息(用户上下文信息)为客户生成个性化的页面，能够精准的为客户提供体验更好的服务；并且能够缩短开发者为不同的页面单独设计页面片段，并且在修改页面中页面片段时可以大大的减小修改人力成本和时间成本。

如图2所示为本申请实施例一种动态改变页面装置的结构示意图。

接收单元201，用于获取原始HTML。

获取单元202，用于获取页面渲染规则和用户上下文信息。

匹配单元203，用于根据所述用户上下文信息得到相应的页面渲染规则。

处理单元204，用于根据所述相应的页面渲染规则调整所述原始HTML中的页面片段，形成优化后的HTML。

作为本申请的一个实施例，所述页面渲染规则包括，判断条件部分和执行处理部分。

作为本申请的一个实施例，所述用户上下文信息至少包括以下内容之一：用户在用户端计算机上输入的信息；还包括用户本机缓存中存储的信息；还包括远端服务器存储的用户信息。

作为本申请的一个实施例，根据所述相应的页面渲染规则调整所述原始HTML中的页面片段至少包括以下处理之一，根据所述相应的页面渲染规则删除特定的页面片段、根据所述相应的页面渲染规则调整页面片段的层叠样式表(CSS)、根据所述相应的页面渲染规则调节页面片段的顺序、根据所述相应的页面渲染规则增加页面片段、根据所述相应的页面渲染规则调节页面片段的属性等。

在本申请中的动态改变页面装置可以为单独的计算机或者为应用程序模块，当为应用程序模块时，可以运行于用户端计算机(或者平板电脑、手机等智能终端)，或者还可以运行 于应用系统端服务器中，将应用系统端服务器发出的HTML页面针对用户的用户上下文信息进行优化。

上述步骤101和102可以不分先后顺序执行。

通过上述本申请的实施例，可以针对用户的个性化信息(用户上下文信息)为客户生成个性化的页面，能够精准的为客户提供体验更好的服务；并且能够缩短开发者为不同的页面单独设计页面片段，并且在修改页面中页面片段时可以大大的减小修改人力成本和时间成本。

如图3所示为本申请实施例一种动态改变页面方法的具体流程图。

在本实施例中动态改变页面装置位于应用系统服务器中。

步骤301，用户端计算机向应用系统服务器发送显示付款界面的请求。

步骤302，应用系统服务器根据所述请求生成原始HTML。

在该原始HTML中，包括原始的页面片段，例如在本例中包括如下DOM节点：

<div id＝qq name＝财付通><div>…</div></div>

<div id＝alipay name＝支付宝><div>…</div></div>

<div id＝yinlian name＝银联><div>…</div></div>

在现有技术中，上述HTML中的DOM节点在页面中显示的顺序即为上述的“财付通”、“支付宝”和“银联”，无论用户通常使用什么付款手段或者用户采用什么身份登录应用系统服务器都按照如上顺序进行显示，这样造成了用户体验上的不足。

步骤303，动态改变页面装置获取页面渲染规则。

在本步骤中动态改变页面装置从应用系统服务器中获取页面渲染规则，在本例中页面渲染规则包括以下3个规则规定DOM节点的顺序：

如果登录用户为支付宝用户，那么：div.name＝支付宝->div.name＝财付通->div.name＝银联；

如果登录用户为QQ用户，那么：div.name＝财付通->div.name＝支付宝->div.name＝银联；

其它情况，那么：div.name＝支付宝->div.name＝财付通->div.name＝银联。

上述页面渲染规则可以使用现有技术中的计算机语言描述，本申请不做任何限制。

在本例中的页面渲染规则分为判断条件部分和执行处理部分，其中判断条件部分包括判断登录用户为支付宝用户、QQ用户或者为其它情况，执行处理部分包括每种判断条件满足时相应的DOM节点顺序。

步骤304，动态改变页面装置获取用户上下文信息。

在本步骤中用户上下文信息可以从用户端计算机获得，在本例中用户登录类型为“支付宝用户”，该用户上下文信息可以根据用户登录应用系统服务器时获取。

在其它实施例中还可以从用户端计算机或者应用系统服务器中获取更多的用户上下文信息，例如还可以为用户的付款历史记录，以确定用户常用的付款方式，用户购买商品的价格、用户登录的地理位置等信息，以确定付款认证的安全级别。

步骤305，动态改变页面装置根据用户上下文信息得到相应的页面渲染规则。

在本步骤中，用户上下文信息中的用户登录类型为“支付宝用户”，根据该信息匹配页面渲染规则，根据步骤303中的页面渲染规则，与用户上下文信息匹配的页面片段显示顺序为“div.name＝支付宝->div.name＝财付通->div.name＝银联”。

步骤306，动态改变页面装置利用原始HTML中的DOM节点匹配页面渲染规则显示顺序中的第一个DOM节点。

具体的，使用<div id＝qq name＝财付通><div>…</div></div>和div.name＝支付宝匹配，如果匹配失败则读取下一个原始HTML页面中的DOM节点继续与页面渲染规则显示顺序中的第一个DOM节点进行匹配。

具体的，使用<div id＝alipay name＝支付宝><div>…</div></div>和div.name＝支付宝匹配，如果匹配失败则读取下一个原始HTML页面中的DOM节点继续与页面渲染规则显示顺序中的第一个DOM节点进行匹配。

在本例中，第二次匹配成功进入步骤307，如果三次匹配均不成功，则进入步骤308。

步骤307，将“支付宝”DOM节点置于所有付款方式的第一个显示位置。

步骤308，动态改变页面装置利用DOM节点匹配页面渲染规则显示顺序中的第二个DOM节点。

具体的，使用<div id＝qq name＝财付通><div>…</div></div>和div.name＝财付通匹配，如果匹配失败则读取下一个原始HTML页面中的DOM节点继续与页面渲染规则显示顺序中的第二个DOM节点进行匹配。

在本例中，第一次匹配成功进入步骤309，如果三次匹配均不成功，则进入步骤310。

步骤309，将“财付通”DOM节点置于所有付款方式的第二个显示位置。

步骤310，动态改变页面装置利用DOM节点匹配页面渲染规则显示顺序中的第三个DOM节点。

具体的，使用<div id＝qq name＝财付通><div>…</div></div>和div.name＝银联匹配，如果匹配失败则读取下一个原始HTML页面中的DOM节点继续与页面渲染规则显示顺序中的第三个DOM节点进行匹配。

具体的，使用<div id＝alipay name＝支付宝><div>…</div></div>和div.name＝银联匹配，如果匹配失败则读取下一个原始HTML页面中的DOM节点继续与页面渲染规则显示顺序中的第三个DOM节点进行匹配。

具体的，使用<div id＝yinlian name＝银联><div>…</div></div>和div.name＝银联匹配，如果匹配失败则结束调整DOM节点的步骤。

在本例中，第三次匹配成功进入步骤311，如果不成功则进入步骤312。

如果步骤306-步骤310均匹配不成功，则结束DOM节点调整的步骤，按照原始HTML中DOM节点的顺序进行显示。

步骤311，将“银联”DOM节点置于所有付款方式的第三个显示位置。

步骤312，将优化后的HTML发送给用户端计算机，在用户端计算机上进行页面渲染，并以上述DOM节点的顺序显示付款界面。

如图4所示为本申请实施例另一种动态改变页面方法的流程图。

在本实施例中动态改变页面装置位于用户端计算机中，在某些情况下，例如交易金额超过预设的门限值(例如200元)，需要输入手机校验码。

包括步骤401，用户端计算机向应用系统服务器发送显示付款界面的请求。

步骤402，应用系统服务器根据所述请求生成原始HTML发送给用户端计算机。

在该原始HTML中包括“手机校验码”这个由多个DOM节点构成的页面片段。在现有技术中，如果在任何支付行为中均要用户输入手机校验码进行付款验证，对于小额支付的情况用户可能会比较频繁的输入手机验证码，会造成用户使用体验较差的问题，但是对于交易金额较高的付款，如果没有手机验证码进行付款验证，则可能影响到用户资金的安全，在现有技术中还不能较好的根据用户的上下文信息进行智能判断，小金额不使用“手机校验码”的页面片段进行验证，对于交易金额超过预设的门限值时，需要进行手机校验码的验证。

步骤403，用户端计算机上的动态改变页面装置获取页面渲染规则。

在本步骤中动态改变页面装置从应用系统服务器中获取页面渲染规则，在本例中页面渲染规则包括以下1个规则规定“手机验证码”页面片段是否出现在HTML中：

如果用户的交易金额超过200元时，则使用“手机验证码”页面片段，否则不出现“手机验证码”页面片段。

当然，本领域技术人员可以理解的是，页面渲染规则可以根据应用安全级别的要求进行替换或者扩充，例如，在本例中还可以为，如果用户属于高危用户时(例如最近几次登录时，用户名密码输入错误超过门限值)，则页面中使用“手机验证码”页面片段，否则页面中不出现“手机验证码”页面片段。

页面渲染规则还可以为，如果用户登录可信时(例如证书环境登录)，并且交易金额大于2000元时，则页面中使用“手机验证码”页面片段，否则页面中不出现“手机验证码”页面片段。

在其它的实施例中，页面渲染规则还可以为其它的内容，判断条件部分和执行处理部分均可以不同，以本发明的思想概括范围内不做限制。

这样在修改判断判断条件部分和相应的执行处理部分时，可以不需要修改原始HTML，只需要修改页面渲染规则即可，可以大幅度的减少开发人员开发代码的时间和难度。

步骤404，动态改变页面装置获取用户上下文信息。

在本步骤中获得的用户上下文信息为交易金额，可以从用户端计算机获得或者也可以从应用系统服务器获得，在本例中交易金额为230元。

步骤405，动态改变页面装置根据用户上下文信息得到相应的页面渲染规则。

在本步骤中，由于用户的交易金额为230元，该交易金额大于预设的门限值200元，因此得到的页面渲染规则为在页面中显示“手机验证码”页面片段。

步骤406，在页面中加入“手机验证码”页面片段，形成优化后的HTML。

在其它实施例中，在页面渲染规则中如果除了“手机验证码”页面片段外还包括其它安全认证方式的页面片段，也可以加入其它认证方式的页面片段，一个DOM节点或者几个DOM节点可以构成一个页面片段，可以添加到页面中，或者从页面中删除，或者还可以调整组件在页面中的位置等。

步骤407，用户端计算机的浏览器对优化后的付款界面HTML进行渲染显示，其中在该付款界面中显示有“手机验证码”页面片段。

在其它实施例中，如果开发人员需要对本页面中的验证方式进行修改，可以不必编辑原始HTML或者改变动态改变页面装置的处理逻辑，只需要对页面渲染规则进行编辑即可，通过对判断条件部分和执行处理部分的修改，就可以实现针对不同用户使用不同的认证方式进行安全控制的目的。

通过上述本申请实施例中的方法和装置，可以针对用户的个性化信息(用户上下文信息)为客户生成个性化的页面，能够精准的为客户提供体验更好的服务；并且能够缩短开发者为不同的页面单独设计DOM节点，并且在修改页面中DOM节点时可以大大的减小修改人力成本和时间成本。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计 人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable Gate Array，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片2。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware Description Language)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(Ruby Hardware Description Language)等，目前最普遍使用的是VHDL(Very-High-Speed Integrated Circuit Hardware Description Language)与Verilog2。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。

本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请 时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

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

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

虽然通过实施例描绘了本申请，本领域普通技术人员知道，本申请有许多变形和变化而不脱离本申请的精神，希望所附的权利要求包括这些变形和变化而不脱离本申请的精神。