一种页面跨域交互方法、系统、设备和存储设备与流程

本公开一般涉及计算机技术领域，具体涉及信息交互技术领域，尤其涉及一种页面跨域交互方法、系统、设备和存储设备。

背景技术：

后台管理系统中，为了方便用户操作，提高工作效率，减少用户在不同系统之间切换的成本，会将其他系统页面嵌入使用。在将嵌入页面和主页面之间进行关联操作时，不可避免的会涉及到数据的传输问题，通常情况下会采用超文本传输协议(http，hypertexttransferprotocol)的get请求方法，然而，考虑到安全性和数据传输的大小限制，不得不选用http的post请求方法。但是，由于是跨系统请求另一个系统的前端页面，会出现跨域的问题。

因此，如何解决跨域问题，实现不同系统页面之间的数据传输，是亟需解决的问题。

技术实现要素：

鉴于现有技术中的上述缺陷或不足，期望提供一种能够实现跨域页面之间的数据传输的方案。

第一方面，本申请实施例提供了一种页面跨域交互方法，包括：

第二域页面接收用户在第一域页面发送的所述第二域页面的访问请求，所述访问请求中包含所述第二域页面的统一资源定位符url，所述url中携带所述第一域页面中待处理数据的标识；

对所述访问请求进行解析，得到所述待处理数据的标识；

将所述待处理数据的标识发送给所述第二域页面的服务器，以便所述第二域页面的服务器根据所述待处理数据的标识从所述第一域页面的服务器获取所述待处理数据；

接收所述第二域页面的服务器发送的所述待处理数据并显示。

第二方面，本申请实施例还提供了一种页面跨域交互系统，包括：第一域页面、第一域页面的服务器、第二域页面和第二域页面的服务器，其中：

所述第二域页面，用于接收用户在所述第一域页面发送的所述第二域页面的访问请求，所述访问请求中包含所述第二域页面的url，所述url中携带所述第一域页面中待处理数据的标识；对所述访问请求进行解析，得到所述待处理数据的标识，并发送给所述第二域页面的服务器；接收所述第二域页面的服务器发送的所述待处理数据并显示；

所述第二域页面的服务器，用于根据所述待处理数据的标识从所述第一域页面的服务器获取所述待处理数据。

第三方面，本申请实施例还提供了一种设备，包括：至少一个处理器、至少一个存储器以及存储在所述存储器中的计算机程序指令，当所述计算机程序指令被所述处理器执行时实现如上所述的页面跨域交互方法。

第四方面，本申请实施例还提供了一种计算机可读存储介质，其上存储有计算机程序指令，当所述计算机程序指令被处理器执行时实现如上所述的页面跨域交互方法。

本申请实施例提供的页面跨域交互方案，通过第一域页面向第二域页面发送访问请求，该访问请求中包含携带第一域页面中待处理数据的标识的第二域页面的url，第二域页面对访问请求进行解析，得到待处理数据的标识后发送给第二域页面的服务器，使第二域页面的服务器能够根据待处理数据的标识从第一域页面的服务器获取待处理数据并反馈给第二域页面，第二域页面对接收到的待处理数据进行显示。本申请实施例的技术方案，采用前端页面—>前端页面—>后端服务器—>后端服务器的请求方式解决多个系统页面之间的数据传输及交互所引起的跨域问题。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1示出了本申请实施例提供的一种页面跨域交互方法的示例性流程图；

图2示出了本申请实施例提供的一种页面跨域交互方法的示例性流程图；

图3示出了本申请实施例提供的一种页面跨域交互系统的示例性结构框图；以及

图4示出了适于用来实现本申请实施例的计算机系统的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与发明相关的部分。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

如背景技术中所提到的，后台管理系统中，为了方便用户操作，提高工作效率，减少用户在不同系统之间切换的成本，会将其他系统页面嵌入使用。在将嵌入页面和主页面之间进行关联操作时，不可避免的会涉及到数据的传输问题。但是，由于是跨系统请求另一个系统的前端页面，会出现跨域的问题。

鉴于现有技术的上述缺陷，本申请实施例提供了一种页面跨域交互方案，通过第一域页面向第二域页面发送访问请求，该访问请求中包含携带第一域页面中待处理数据的标识的第二域页面的url，第二域页面对访问请求进行解析，得到待处理数据的标识后发送给第二域页面的服务器，使第二域页面的服务器能够根据待处理数据的标识从第一域页面的服务器获取待处理数据并反馈给第二域页面，第二域页面对接收到的待处理数据进行显示。本申请实施例的技术方案，采用前端页面—>前端页面—>后端服务器—>后端服务器的请求方式解决多个系统页面之间的数据传输及交互所引起的跨域问题。

本申请实施例提供的页面跨域方法可以嵌入在微信公众号、微信小程序、支付宝生活号、app等移动终端及电脑浏览器html5等多终端上使用。在多系统的前端页面相互嵌入的场景下(统一登录其都已拥有权限)，用户可以以一个系统为支点，在不切换系统的情况下，使用彼此系统的页面功能及数据。

下面将结合流程图来描述本申请实施例的方法。

参考图1，其示出了本申请实施例提供的一种页面跨域交互方法的示例性流程图。

该方法包括如下步骤：

步骤110，第二域页面接收用户在第一域页面发送的第二域页面的访问请求，该访问请求中包含第二域页面的统一资源定位符(uniformresourcelocator，url)，该url中携带第一域页面中待处理数据的标识。

本申请实施例中，当用户在第一域页面操作业务数据时，由于业务原因，需要在第二域页面同步处理该业务数据，此时用户可以在第一域页面调用第二域页面，并向第二域页面发送访问请求，该访问请求中需携带第二域页面的url，同时携带有待处理数据的标识，其中，待处理数据指的是第二域页面需要同步处理的业务数据。

步骤120，第二域页面对访问请求进行解析，得到待处理数据的标识。

具体的，第二域页面接收到访问请求后，从访问请求中的url中解析出其携带的待处理数据的标识。

步骤130，将待处理数据的标识发送给第二域页面的服务器，以便第二域页面的服务器根据待处理数据的标识从第一域页面的服务器获取待处理数据。

具体的，第二域页面将待处理数据的标识发送给第二域页面的服务器；

第二域页面的服务器接收到该待处理数据的标识后，可以通过post请求的方式将该待处理数据的标识发送给第一域页面的服务器；

第一域页面的服务器根据该待处理数据的标识，从自身的数据库中查找待处理数据的标识对应的待处理数据，并将查找到的待处理数据发送给第二域页面的服务器。

步骤140，接收第二域页面的服务器发送的待处理数据并显示。

可选的，第一域页面向第二域页面发送访问请求时，该访问请求中包含的url中还可以携带有第一域页面标识，该第一域页面标识用于表征数据来源。

这样当第二域页面从访问请求中解析出url中的参数(包括待处理数据的标识以及第一域页面标识)并发送给第二域页面的服务器之后，第二域页面的服务器可以先根据第一域页面标识确定出数据来源，然后将待处理数据的标识发送给确定出的数据来源，即第一域页面的服务器，以获取待处理数据。

可选的，该访问请求中包含的url中还可以携带有第一域页面中所有数据的标识和当前数据索引。

这样当第二域页面从访问请求中解析出url中的参数(包括待处理数据的标识、第一域页面中所有数据的标识和当前数据索引)且第二域页面接收到用户触发的对待处理数据的上一条或者下一条数据的操作请求时，根据第一域页面中所有数据的标识和当前数据索引，确定新的待处理数据的标识，并将新的待处理数据的标识发送给第二域页面的服务器，以便第二域页面的服务器根据新的待处理数据的标识从第一域页面的服务器获取新的待处理数据。

本申请实施例提供的页面跨域交互方案，通过第一域页面向第二域页面发送访问请求，该访问请求中包含携带第一域页面中待处理数据的标识的第二域页面的url，第二域页面对访问请求进行解析，得到待处理数据的标识后发送给第二域页面的服务器，使第二域页面的服务器能够根据待处理数据的标识从第一域页面的服务器获取待处理数据并反馈给第二域页面，第二域页面对接收到的待处理数据进行显示。本申请实施例的技术方案，采用前端页面—>前端页面—>后端服务器—>后端服务器的请求方式解决多个系统页面之间的数据传输及交互所引起的跨域问题。

下面将结合流程图来详细描述本申请实施例提供的页面跨域交互方法，如图2所示，为本申请实施例提供的页面跨域交互方法的流程示意图。该方法应用于系统a和系统b相互嵌套的场景中。该方法包括：

步骤210，用户点击系统a的前端页面，向系统b的前端页面发送访问请求。

其中，访问请求可是通过get请求方式发送的，将下述参数携带在系统b的前端页面的url进行发送：

1、系统a的前端页面的所有数据标识(id1、id2、...、idn)

2、系统a的前端页面的当前数据索引(indexnum:id)

3、系统a的前端页面的待处理数据的标识(selectedid:id)

4、数据来源标识(sourcefrom)

将上述参数进行拼装，得到的url可以例如为：

"http://127.0.0.1:8000/static/b.html？cdmdata＝{"indexnum":0,"selectedid":"37","datalist":[{"id":"37"},{"id":"43045"}],"sourcefrom":"listpage"}"

步骤220，系统b的前端页面对接收到的访问请求进行解析，得到访问请求中携带的系统a的前端页面的所有数据标识、当前数据索引、待处理数据的标识和数据来源标识，并将待处理数据的标识发送给系统b的后端服务器。

步骤230，系统b的后端服务器通过post请求方式将待处理数据的标识发送给系统a的后端服务器。

步骤240，系统a的后端服务器根据待处理数据的标识，将待处理数据返回给系统b的后端服务器。

具体的，系统a的后端服务器根据该待处理数据的标识，从自身的数据库中查找待处理数据的标识对应的待处理数据，并将查找到的待处理数据发送给系统b的后端服务器。

步骤250，系统b的后端服务器将接收的待处理数据返回给系统b的前端页面，由系统b的前端页面对待处理数据进行渲染加载，完成用户关联操作。

采用本申请实施例提供的页面跨域交互方案，可以实现如下技术效果：

1、能够在多系统页面之间无缝对接，提高系统多样性，增强用户体验，减少多个系统之间来回切换的成本。

2、实现跨系统页面相互嵌套场景下的批量数据传输。

3、降低因页面重复开发而增加的成本。

应当注意，尽管在附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。相反，流程图中描绘的步骤可以改变执行顺序。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

进一步参考图3，其示出了本申请实施例提供一种页面跨域交互系统的示例性结构框图。

该系统包括第一域页面31、第一域页面的服务器32、第二域页面33和第二域页面的服务器34，其中：

所述第二域页面33，用于接收用户在所述第一域页面31发送的所述第二域页面33的访问请求，所述访问请求中包含所述第二域页面33的url，所述url中携带所述第一域页面31中待处理数据的标识；对所述访问请求进行解析，得到所述待处理数据的标识，并发送给所述第二域页面的服务器34；接收所述第二域页面的服务器34发送的所述待处理数据并显示；

所述第二域页面的服务器34，用于根据所述待处理数据的标识从所述第一域页面的服务器32获取所述待处理数据。

可选的，所述第二域页面的服务器34，具体用于：

将所述待处理数据的标识发送给所述第一域页面的服务器32；并接收所述第一域页面的服务器32发送的所述待处理数据；

所述第一域页面的服务器32，用于：

根据所述待处理数据的标识，从自身的数据库中查找所述待处理数据的标识对应的待处理数据，并将查找到的待处理数据发送给所述第二域页面的服务器34。

所述url中还携带第一域页面标识；则

所述第二域页面33还用于：

对所述访问请求进行解析，得到所述第一域页面标识，并发送给所述第二域页面的服务器34；

所述第二域页面的服务器34，具体用于：

根据所述第一域页面标识，将所述待处理数据的标识发送给所述第一域页面标识对应的第一域页面的服务器32。

可选的，所述url中还携带所述第一域页面中所有数据的标识和当前数据索引；则

所述第二域页面33还用于：

对所述访问请求进行解析，得到所述第一域页面31中所有数据的标识和当前数据索引；当接收到用户触发的对所述待处理数据的上一条或者下一条数据的操作请求时，根据所述第一域页面31中所有数据的标识和当前数据索引，确定新的待处理数据的标识，并将所述新的待处理数据的标识发送给所述第二域页面的服务器34；

所述第二域页面的服务器34，还用于：

根据所述新的待处理数据的标识从所述第一域页面的服务器32获取所述新的待处理数据。

应当理解，该系统中记载的诸子系统或单元与参考图1和图2描述的方法中的各个步骤相对应。由此，上文针对方法描述的操作和特征同样适用于该系统及其中包含的单元，在此不再赘述。

下面参考图4，其示出了适于用来实现本申请实施例的服务器的计算机系统400的结构示意图。

如图4所示，计算机系统包括中央处理单元(cpu)401，其可以根据存储在只读存储器(rom)402中的程序或者从存储部分加载到随机访问存储器(ram)403中的程序而执行各种适当的动作和处理。在ram403中，还存储有系统操作所需的各种程序和数据。cpu401、rom402以及ram403通过总线404彼此相连。输入/输出(i/o)接口405也连接至总线404。

以下部件连接至i/o接口405：包括键盘、鼠标等的输入部分406；包括诸如阴极射线管(crt)、液晶显示器(lcd)等以及扬声器等的输出部分；包括硬盘等的存储部分408；以及包括诸如lan卡、调制解调器等的网络接口卡的通信部分409。通信部分409经由诸如因特网的网络执行通信处理。驱动器也根据需要连接至i/o接口405。可拆卸介质411，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器410上，以便于从其上读出的计算机程序根据需要被安装入存储部分408。

特别地，根据本发明的实施例，上文参考流程图1-2描述的过程可以被实现为计算机软件程序。例如，本发明的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分从网络上被下载和安装，和/或从可拆卸介质被安装。在该计算机程序被中央处理单元(cpu)401执行时，执行本申请的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、rf等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现，所描述的单元也可以设置在处理器中。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。所描述的单元或模块也可以设置在处理器中。

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该电子设备执行时，使得该电子设备实现如上述实施例中所述的页面跨域交互方法。

应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

此外，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。