CN113377375A - 页面处理的方法 - Google Patents

页面处理的方法 Download PDF

Info

Publication number
CN113377375A
CN113377375A CN202110739506.4A CN202110739506A CN113377375A CN 113377375 A CN113377375 A CN 113377375A CN 202110739506 A CN202110739506 A CN 202110739506A CN 113377375 A CN113377375 A CN 113377375A
Authority
CN
China
Prior art keywords
page
target sub
window
sub
sandbox
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
CN202110739506.4A
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.)
Hangzhou Qunhe Information Technology Co Ltd
Original Assignee
Hangzhou Qunhe Information Technology 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 Hangzhou Qunhe Information Technology Co Ltd filed Critical Hangzhou Qunhe Information Technology Co Ltd
Priority to CN202110739506.4A priority Critical patent/CN113377375A/zh
Publication of CN113377375A publication Critical patent/CN113377375A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44594—Unloading
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
    • G06F9/4488—Object-oriented
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45533—Hypervisors; Virtual machine monitors
    • G06F9/45558—Hypervisor-specific management and integration aspects
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45533—Hypervisors; Virtual machine monitors
    • G06F9/45558—Hypervisor-specific management and integration aspects
    • G06F2009/45562—Creating, deleting, cloning virtual machine instances

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computing Systems (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本申请公开了一种页面处理的方法。其中，该方法包括：在主页面创建与目标子页面对应的沙箱，并在沙箱中启动ES6中的代理Proxy生成全局变量window的代理对象window.proxy；在Map对象中记录对window.proxy的写操作内容，并读取Map对象中记录的window.proxy的写操作内容；改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在目标子页面对应的第二预设标签内。本申请解决了由于相关技术中无法既做到主页面与子页面可以独立开发部署，又能在浏览器中把主应用和子应用内容聚合，共用主应用的公共导航和菜单，而若基于iframe技术进行页面隔离造成的页面影响浏览器前进后退功能、遮罩弹窗不能全屏覆盖、加载速度慢的技术问题。

Description

页面处理的方法
技术领域
本申请涉及前端设计技术领域，具体而言，涉及一种页面处理的方法。
背景技术
近年来涌现出很多的SaaS(软件即服务)公司，都有大量类似商家后台这种云端页面系统。比如各种页面之间，如何复用公共导航和菜单，并做到应用拆分独立部署，就是一个软件设计里面很关键的问题，目前相关技术中的方案中大致有3种：
1.将整个页面作为一个单页应用维护在一个仓库里，做一个单体式应用，但是这样导致维护成本剧增，随着页面变多会造成代码之间频繁冲突；
2.把公共导航部分抽成组件，被各个子页面依赖，但是这样无法保证公共部分的UI统一，可能存在版本不一致，并且子页面也可不使用这个公共组件，无法做到整体单页的切换体验，即把公共导航抽成组件被目标子页面引用，而这种引用方式无法保证公共部分UI统一，并且存在冗余，目标子页面还需要关注除了引用内容以外的额外组件，会造成页面之间的逻辑与样式污染。
3.把公共导航由平台方维护，然后内容区采用iframe技术嵌入子页面内容，实现一个沙箱。该方案存在以下问题：(1)iframe和主页面共享连接池，会影响页面的并行加载；(2)iframe和主页面共用同一个浏览历史，会影响浏览器的前进后退，无法和主页面URL同步；(3)想做全局遮罩弹窗也只能在iframe范围内居中，无法在整个页面垂直水平居中；(4)iframe加载失败情况不好处理，非同源的iframe在chrome浏览器下不支持onerror事件。
即，相关技术中，无法既做到主页面和子页面能各自独立开发部署，又能在浏览器中把主应用和子应用内容聚合，共用主应用的公共导航和菜单，而若基于iframe技术进行页面隔离，又有影响浏览器前进后退功能、遮罩弹窗不能全屏覆盖、加载速度慢等问题。
针对上述的问题，目前尚未提出有效的解决方案。
发明内容
本申请实施例提供了一种页面处理的方法，以至少解决由于相关技术中无法既做到主页面与子页面可以独立开发部署，又能在浏览器中把主应用和子应用内容聚合，共用主应用的公共导航和菜单，而若基于iframe技术进行页面隔离造成的页面影响浏览器前进后退功能、遮罩弹窗不能全屏覆盖、加载速度慢的技术问题。
根据本申请实施例的一个方面，提供了一种页面处理的方法，包括：在主页面创建与目标子页面对应的沙箱，并在沙箱中启动ES6中的代理Proxy生成全局变量window的代理对象window.proxy；在Map对象中记录对window.proxy的写操作内容，并读取Map对象中记录的window.proxy的写操作内容；改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在目标子页面对应的第二预设标签内。
可选地，预定目标方法包括：document.createElement，appendChild，removeChild以及insertBefore方法，第一预设标签包括：Js的逻辑代码script标签、以及用于外联CSS样式文件的link标签以及内联CSS样式文件style标签；第二预设标签为主页面中的DOM树中的挂载点div；改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在目标子页面对应的第二预设标签内，包括：改写document.createElement，appendChild，removeChild以及insertBefore方法，使得新创建的元素以及script标签、link标签以及style标签均挂载在DOM树中的挂载点div中。
可选地，方法还包括：当Map对象中无记录的window.proxy的写操作内容，则读取主页面中全局变量window的数据。
可选地，目标子页面的生命周期至少包括：加载事件与卸载事件，加载事件用于加载展示目标子页面，卸载事件用于关闭停用目标子页面，在读取Map对象中记录的window.proxy的写操作内容之前，方法还包括：主页面向目标子页面发送fetch请求，获取目标子页面的HTML内容；基于eval函数执行HTML内容。
可选地，基于eval函数执行HTML内容，包括：基于正则匹配方法解析HTML内容中的Js逻辑数据；确定Js逻辑数据对应的字符串，基于eval函数将字符串当做Js代码进行执行，实现对目标子页面的加载。
可选地，方法还包括：当卸载事件触发时，将第一预设标签从目标子页面对应的挂载点div清除，并对目标子页面对应的沙箱进行重置操作，重置操作用于将全局变量window中的数据进行还原。
可选地，方法还包括：将目标子页面中的Css样式脚本语言写入Js逻辑数据中，或者将目标子页面中添加目标子页面对应的类class，以避免目标子页面与主页面之间发生污染。
可选地，在主页面创建与目标子页面对应的沙箱之前，方法还包括：加载主页面中的公共导航菜单，以及子页面列表，其中，子页面列表至少包括：目标子页面；获取统一资源定位器URL；基于URL和子页面列表确定待加载的目标子页面。
根据本申请实施例的一个方面，还提供了一种页面处理的方法，包括：在浏览器的主页面创建与目标子页面对应的沙箱，并在沙箱中启动ES6中的代理模块，通过代理模块生成窗口全局变量的窗口代理对象；在加载主页面对应的目标子页面时，解析目标子页面，得到目标子页面的逻辑数据，其中，逻辑数据中至少包括对全局窗口对象进行写操作的写操作记录；通过目标子页面所在沙箱中的代理模块将逻辑数据存储至JS中的Map对象中。
可选地，通过目标子页面所在沙箱中的代理模块将逻辑数据存储至Js中的Map对象中之后，方法还包括：改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在目标子页面对应的第二预设标签内。
根据本申请实施例的一个方面，还可以提供一种非易失性存储介质，非易失性存储介质包括存储的程序，其中，在程序运行时控制非易失性存储介质所在设备执行任意一种页面处理方法。
根据本申请实施例的一个方面，还提供了一种处理器，处理器用于运行程序，其中，程序运行时执行任意一种页面处理方法。
在本申请实施例中，采用基于ES6中proxy代理window对象的方式，通过在主页面创建与目标子页面对应的沙箱，并在沙箱中启动ES6中的代理Proxy生成全局变量window的代理对象window.proxy；在Map对象中记录对window.proxy的写操作内容，并读取Map对象中记录的window.proxy的写操作内容；改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在目标子页面对应的第二预设标签内，达到了将各个子页面运行在沙箱里，实现子页面与子页面之间样式、逻辑隔离的技术效果，进而解决了由于相关技术中无法既做到主页面与子页面可以独立开发部署，又能在浏览器中把主应用和子应用内容聚合，共用主应用的公共导航和菜单，而若基于iframe技术进行页面隔离造成的页面影响浏览器前进后退功能、遮罩弹窗不能全屏覆盖、加载速度慢的技术问题。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1是根据本申请实施例的一种可选的页面处理的方法的流程示意图；
图2是本申请一种可选的主页面管理子页面的管理方法示意图；
图3是主页面加载以及沙箱逻辑流程示意图；
图4是本申请实施例一种可选的场景下的页面示意图；
图5是根据本申请实施例的另一种一种页面处理的方法。
具体实施方式
为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。
需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
为了便于本领域技术人员更好的理解本申请相关实施例，现将本申请实施例可能涉及的技术术语或者部分名词如下：
SaaS：软件即服务(Software as a Service，缩写：SaaS)，它是一种软件交付模式，在这种交付模式中，软件仅需通过网络，不须经过传统的安装步骤即可使用，软件及其相关的数据集中托管于云端服务。用户通常使用精简客户端，一般即经由网页浏览器来访问，访问软件即服务。SaaS最大的特色在于软件本身并没有被下载到用户的硬盘，而是存储在提供商的云端或者服务器。对比传统软件需要花钱购买，下载。软件即服务只需要用户租用软件，在线使用，不但降低了用户购买风险，也无需下载软件本身，无设备要求的限制。
单体应用程序：单体式应用程序(英语：Monolithic application)是一种软件设计结构，将应用程序的所有功能都打包成一个独立的单元。对于单体应用程序而言，若要修改一个地方就要将整个应用全部部署，构建时间过长，回归测试周期过长，开发效率降低。
User Interface：用户界面是指对软件的人机交互、操作逻辑、界面美观的整体设计，缩写为UI。
Uniform Resource Locator：统一资源定位器，正确的术语为网域名称(Domainname)，简称为URL。
onerror事件：出错事件，在加载外部文件(文档或者图像)发生错误时触发。
ECMAScript：ECMAScript是一种有Ecma国际，在标准EVMA-262定义的脚本语言规范。这种语言，在万维网上应用广泛，它往往被称为JavaScript或Jscript，但实际上后两者是ECMA-262标准的实现与扩展。ES6：ECMAScript2015(ES2015)，被称为第6版(ES6)。
window对象：JavaScript中的所有对象都存在于一个运行环境中，这个运行环境本身就是对象，称为“顶层对象”。这就是说，JavaScript的所有对象，都是“顶层对象”的下属。不同的运行环境有不同的“顶层对象”，在浏览器环境中，这个顶层对象就是window对象。
沙箱：Sandboxie(沙箱、沙盘、网络编程虚拟执行环境)即是一个虚拟容器，沙箱中可运行Javascript脚本和HTML代码，展示出页面程序。沙箱有开启、重置等生命周期，运行所产生的变化可以随后删除，其内部运行的程序并不能对顶层对象window产生永久性的影响。
Eval：把字符串标称可以执行的Js语言，Eval()函数会将传入的字符串当做JavaScript代码进行执行。
JavaScript：JavaScript(缩写为Js)是一种高级的、解释型语言的编程语言。具有以下特点：
1.是一种解释性脚本语言(代码不进行预编译)
2.主要用来向HTML页面添加交互行为
3.可以直接嵌入HTML页面。
HTML：超文本标记语言(HyperText Markup Language)是一种用于创建网页的标准标记语言。
层叠样式表：层叠样式表(Cascading Style Sheets，缩写CSS，又称串样式列表，级联样式表)是一种用来为结构化文档(如HTML文档或者XML应用)添加样式(字体，间距和颜色等)的计算机语言。
Proxy：Proxy(代理)是ES6中新增的一个特性。Proxy让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。使用Proxy的好处是：对象只需关注于核心逻辑，一些非核心的逻辑(如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等)可以让Proxy来做，从而达到关注点分离，降级对象复杂度的目的。
根据本申请实施例，提供了一种页面处理的方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
图1是根据本申请实施例的页面处理的方法，如图1所示，该方法包括如下步骤：
步骤S102，在主页面创建与目标子页面对应的沙箱，并在沙箱中启动ES6中的代理Proxy生成全局变量window的代理对象window.proxy；
步骤S104，在Map对象中记录对window.proxy的写操作内容，并读取Map对象中记录的window.proxy的写操作内容；
步骤S106，改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在目标子页面对应的第二预设标签内。
该页面处理方法中，在主页面创建与目标子页面对应的沙箱，并在沙箱中启动ES6中的代理Proxy生成全局变量window的代理对象window.proxy；在Map对象中记录对window.proxy的写操作内容，并读取Map对象中记录的window.proxy的写操作内容；改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在目标子页面对应的第二预设标签内，达到了将各个子页面运行在沙箱里，实现子页面与子页面之间样式、逻辑隔离的技术效果，进而解决了由于相关技术中无法既做到主页面与子页面可以独立开发部署，又能在浏览器中把主应用和子应用内容进行聚合，共用主应用的公共导航和菜单，而若基于iframe技术进行页面隔离造成的页面影响浏览器前进后退功能、遮罩弹窗不能全屏覆盖、加载速度慢的技术问题。
需要说明的是，上述预定目标方法包括但不限于：document.createElement，appendChild，removeChild以及insertBefore方法，第一预设标签包括：Js的逻辑代码script标签、以及用于外联CSS样式文件的link标签以及内联CSS样式文件style标签；第二预设标签为主页面中的DOM树中的挂载点div；容易注意到的是，改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在目标子页面对应的第二预设标签内，包括：改写document.createElement，appendChild，removeChild以及insertBefore方法，使得新创建的元素以及script标签、link标签以及style标签均挂载在DOM树中的挂载点div中。
可以理解的，在主页面创建与目标子页面对应的沙箱，并在沙箱中启动ES6中的代理Proxy生成全局变量window的代理对象window.proxy；在Map对象中记录对window.proxy的写操作内容，并读取Map对象中记录的window.proxy的写操作内容，用于完成逻辑隔离；改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在目标子页面对应的第二预设标签内用于实现样式逻辑。
在一种可选的实施例中上述逻辑隔离可以通过以下步骤实现：
(1)主页面创建沙箱。新建一个副本对象fakeWindow，通过new Proxy(fakeWindow)，生成window的代理对象window.proxy。
定义一个Map对象updateValueMap，后面写全局属性操作记录到updateValueMap里，读全局属性操作优先读updateValueMap，如果没有，则读外层主页面真实全局变量的数据。这样做到对全局变量的读写分离：读操作可以读到全局变量和子页面内部变量，可以实现子页面调用主页面方法，并且写操作不会污染全局变量。
(2)子页面加载。主页面fetch获取子页面的HTML内容，用正则匹配并解析其中的js，把js内容字符串存储到一个对象中，然后运行的时候使用eval函数包裹一层执行。
eval(`；(function(window){；${scriptText}}).bind(window.proxy)(window.proxy)；`))
window.proxy即被代理的window对象，所有子页面对window的操作，都会被这个对象拦截并记录处理。
(3)沙箱开启。主页面沙箱容器记录window对象的新增、修改和删除的属性和方法。
(4)子页面卸载，沙箱重置与关闭，还原对window对象的改动。
容易注意打的是：当Map对象中无记录的window.proxy的写操作内容，则读取主页面中全局变量window的数据。
在一种可选的实施例中，上述样式隔离可以通过以下步骤实现：
(1)增强，document.createElement，appendChild，removeChild，insertBefore等方法，负责创建元素并劫持script、link连接外部(外联)CSS文件、style内联的CSS三个标签的创建动作，使DOM(三个标签)节点和样式的插入都限制在挂载点div(dom中的标签范围里，其中script为Js中的逻辑代码，。
(2)当子页面卸载时，对应的<link><style>标签样式也会一并移除。这将会避免从子页面切换到另一个子页面时的样式污染。
(3)同时子页面采用css in js，或添加class DOM定义CSS得值前缀方式避免子页面和主页面之间的样式污染。
需要说明的是，目标子页面的生命周期至少包括：加载事件与卸载事件，加载事件用于加载展示目标子页面，卸载事件用于关闭停用目标子页面，在读取Map对象中记录的window.proxy的写操作内容之前，主页面可向目标子页面发送fetch请求，获取目标子页面的HTML内容；基于eval函数执行HTML内容。
本申请一些实施例中，可基于eval函数执行HTML内容，具体地，可基于正则匹配方法解析HTML内容中的Js逻辑数据；确定Js逻辑数据对应的字符串，基于eval函数将字符串当做Js代码进行执行，实现对目标子页面的加载。
需要说明的是：当卸载事件触发时，将第一预设标签从目标子页面对应的挂载点div清除，并对目标子页面对应的沙箱进行重置操作，重置操作用于将全局变量window中的数据进行还原。
本申请一些可选的实施例中，将目标子页面中的Css样式脚本语言写入Js逻辑数据中，或者将目标子页面中添加目标子页面对应的类class，以避免目标子页面与主页面之间发生污染。
本申请一些实施例中，在主页面创建与目标子页面对应的沙箱之前，可加载主页面中的公共导航菜单，以及子页面列表，其中，子页面列表至少包括：目标子页面；获取统一资源定位器URL；基于URL和子页面列表确定待加载的目标子页面。
通过上述方法，可以实现中后台系统的逻辑沙箱，主页面和子页面可以独立开发部署，且子应用之间的切换不会互相污染，架构解耦，在系统维护性和扩展性上有所增强；同时，主页面维护公共导航等公共逻辑部分，可以做到实时、同步、全量的更新。子页面无需关注公共导航依赖，专注业务实现，可以提升主、子页面开发者的开发效率。此外，还是保持单页切换子页面的体验，用户体验更好，子页面之间切换时省去了主页面的加载时间，所以子页面之间的切换速度更快，可以提高用户的使用效率。
图2是本申请一种可选的主页面管理子页面的管理方法示意图，如图2所示，该方法包括如下步骤：
运行浏览器，根据url获取待加载的应用的元信息，然后，暂存当前的全局变量与样式，再加载应用资源(样式)，获取应用信息，调用应用信息中的mount；当应用使用完成后，开始卸载应用，调用应用中的unmount，然后，还原全局变量和样式，开始加载下一个应用，获取该应用元信息，暂存当前的全局变量和样式(即，循环执行上述步骤)。
图3是主页面加载以及沙箱逻辑流程示意图，如图3所示，主页面加载过程，路由匹配子页面，子页面开始加载，开启沙箱，然后解析子页面js，新建副本对象fakeWindow，通过new Proxy新建代理对象window.proxy，eval包裹执行子页面js，读写window.xx变量，将读写的数据记录在updateValueMap中，判断Map中是否有记录，若没有新写入的记录，则读取外层window，进行路由变更，完成子页面卸载后，重置沙箱；若存在新写入的记录，则返回缓存记录，同时读取外层window，进行路由变更，完成子页面卸载，并在子页面卸载后，重置沙箱。
图4是本申请一种可选的场景下的页面示意图，如图4所示，该页面主要包括：全局导航区、子页面内容区，以及全局插件三部分。
为了便于本领域技术人员更好的理解本申请相关实施例中，现结合商家后台这种应用场景进行解释说明，具体地，在商家后台这种场景下，可以把接入的各方子页面暴露出mount、unmount等生命周期方法，由主页面加载并执行子页面的生命周期方法。主页面包括全局导航、全局客服插件等模块，内容取决于子页面内容。
(1)通过工程化脚手架，可以同时跑起来主页面和子页面两个仓库并调试。两者互不影响，所以主页面和子页面可以独立开发和构建。主页面只关心子页面的生成好的HTML结构。
(2)浏览器输入子页面URL，主页面公共导航加载完成，获取子页面列表；
(3)主页面根据URL和子页面列表做匹配确定要加载的子页面；
(4)然后主页面fetch获取子页面的HTML内容，解析出有哪些js、css
(5)把解析出的js代码包裹在一个eval方法里，并通过proxy做代理拦截，把对全局window的写入和变更记录在临时变量里，读取window时优先读这个变更记录的内容，这样不会对真实的window对象造成污染。
(6)增强document.createElement，appendChild，removeChild，insertBefore方法，劫持script、link、style三个标签的创建动作，使DOM节点和样式的插入都限制在挂载点div范围里；
(7)子页面的HTML被解析和嵌入到主页面的一个DOM挂载点下；
(8)主页面和子页面的内容被浏览器渲染完成，展示给用户；
(9)当切换其他子页面，路由变更时，把proxy拦截去除并重置临时的全局变量，并把挂载点内容清空，<link><style>标签样式也会一并移除，重复(3)以后的步骤。
图5是根据本申请实施例的另一种一种页面处理的方法，如图5所示，该方法包括：
S202，在浏览器的主页面创建与目标子页面对应的沙箱，并在沙箱中启动ES6中的代理模块，通过代理模块生成窗口全局变量的窗口代理对象；
S204，在加载主页面对应的目标子页面时，解析目标子页面，得到目标子页面的逻辑数据，其中，逻辑数据中至少包括对全局窗口对象进行写操作的写操作记录；
S206，通过目标子页面所在沙箱中的代理模块将逻辑数据存储至JS中的Map对象中。
该页面处理的方法中，在浏览器的主页面创建与目标子页面对应的沙箱，并在沙箱中启动ES6中的代理模块，通过代理模块生成窗口全局变量的窗口代理对象；在加载主页面对应的目标子页面时，解析目标子页面，得到目标子页面的逻辑数据，其中，逻辑数据中至少包括对全局窗口对象进行写操作的写操作记录；通过目标子页面所在沙箱中的代理模块将逻辑数据存储至JS中的Map对象中，达到了将各个子页面运行在沙箱里，实现子页面与子页面之间样式、逻辑隔离的技术效果，进而解决了由于相关技术中无法既做到主页面与子页面可以独立开发部署，又能在浏览器中把主应用和子应用内容聚合，共用主应用的公共导航和菜单，而若基于iframe技术进行页面隔离造成的页面影响浏览器前进后退功能、遮罩弹窗不能全屏覆盖、加载速度慢的技术问题。
可选地，通过目标子页面所在沙箱中的代理模块将逻辑数据存储至Js中的Map对象中之后，可改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在目标子页面对应的第二预设标签内。
根据本申请实施例的一个方面，还可以提供一种非易失性存储介质，非易失性存储介质包括存储的程序，其中，在程序运行时控制非易失性存储介质所在设备执行任意一种页面处理方法。
根据本申请实施例的一个方面，还提供了一种处理器，处理器用于运行程序，其中，程序运行时执行任意一种页面处理方法。
具体地，上述存储介质用于存储执行以下功能的程序指令，实现以下功能:
在主页面创建与目标子页面对应的沙箱，并在沙箱中启动ES6中的代理Proxy生成全局变量window的代理对象window.proxy；在Map对象中记录对window.proxy的写操作内容，并读取Map对象中记录的window.proxy的写操作内容；改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在目标子页面对应的第二预设标签内。
根据本申请实施例的一个方面，还可以提供一种非易失性存储介质，非易失性存储介质包括存储的程序，其中，在程序运行时控制非易失性存储介质所在设备执行任意一种页面处理方法。
具体地，上述处理器用于调用存储器中的程序指令，实现以下功能：在主页面创建与目标子页面对应的沙箱，并在沙箱中启动ES6中的代理Proxy生成全局变量window的代理对象window.proxy；在Map对象中记录对window.proxy的写操作内容，并读取Map对象中记录的window.proxy的写操作内容；改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在目标子页面对应的第二预设标签内。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种页面处理的方法，其特征在于，包括：
在主页面创建与目标子页面对应的沙箱，并在所述沙箱中启动ES6中的代理Proxy生成全局变量window的代理对象window.proxy；
在Map对象中记录对所述window.proxy的写操作内容，并读取所述Map对象中记录的所述window.proxy的写操作内容；
改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在所述目标子页面对应的第二预设标签内。
2.根据权利要求1所述的方法，其特征在于，所述预定目标方法包括：document.createElement，appendChild，removeChild以及insertBefore方法，所述第一预设标签包括：Js的逻辑代码script标签、以及用于外联CSS样式文件的link标签以及内联CSS样式文件style标签；所述第二预设标签为所述主页面中的DOM树中的挂载点div；改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在所述目标子页面对应的第二预设标签内，包括：
改写所述document.createElement，appendChild，removeChild以及insertBefore方法，使得新创建的元素以及所述script标签、link标签以及style标签均挂载在所述DOM树中的挂载点div中。
3.根据权利要求1所述的方法，其特征在于，所述方法还包括：当所述Map对象中无记录的所述window.proxy的写操作内容，则读取所述主页面中所述全局变量window的数据。
4.根据权利要求2所述的方法，其特征在于，所述目标子页面的生命周期至少包括：加载事件与卸载事件，所述加载事件用于加载展示所述目标子页面，所述卸载事件用于关闭停用所述目标子页面，在读取所述Map对象中记录的所述window.proxy的写操作内容之前，所述方法还包括：
所述主页面向所述目标子页面发送fetch请求，获取所述目标子页面的HTML内容；
基于eval函数执行所述HTML内容。
5.根据权利要求4所述的方法，其特征在于，基于eval函数执行所述HTML内容，包括：
基于正则匹配方法解析所述HTML内容中的Js逻辑数据；
确定所述Js逻辑数据对应的字符串，基于所述eval函数将所述字符串当做Js代码进行执行，实现对所述目标子页面的加载。
6.根据权利要求4所述的方法，其特征在于，所述方法还包括：当所述卸载事件触发时，将所述第一预设标签从所述目标子页面对应的所述挂载点div清除，并对所述目标子页面对应的沙箱进行重置操作，所述重置操作用于将所述全局变量window中的数据进行还原。
7.根据权利要求6所述的方法，其特征在于，所述方法还包括：将所述目标子页面中的Css样式脚本语言写入所述Js逻辑数据中，或者将所述目标子页面中添加所述目标子页面对应的类class，以避免所述目标子页面与所述主页面之间发生污染。
8.根据权利要求1所述的方法，其特征在于，在主页面创建与目标子页面对应的沙箱之前，所述方法还包括：
加载所述主页面中的公共导航菜单，以及子页面列表，其中，所述子页面列表至少包括：所述目标子页面；
获取统一资源定位器URL；
基于所述URL和所述子页面列表确定待加载的所述目标子页面。
9.一种页面处理的方法，其特征在于，包括：
在浏览器的主页面创建与目标子页面对应的沙箱，并在所述沙箱中启动ES6中的代理模块，通过所述代理模块生成窗口全局变量的窗口代理对象；
在加载主页面对应的目标子页面时，解析所述目标子页面，得到所述目标子页面的逻辑数据，其中，所述逻辑数据中至少包括对全局窗口对象进行写操作的写操作记录；
通过所述目标子页面所在沙箱中的代理模块将所述逻辑数据存储至JS中的Map对象中。
10.根据权利要求9所述的方法，其特征在于，通过所述目标子页面所在沙箱中的代理模块将所述逻辑数据存储至Js中的Map对象中之后，所述方法还包括：
改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在所述目标子页面对应的第二预设标签内。
CN202110739506.4A 2021-06-30 2021-06-30 页面处理的方法 Pending CN113377375A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110739506.4A CN113377375A (zh) 2021-06-30 2021-06-30 页面处理的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110739506.4A CN113377375A (zh) 2021-06-30 2021-06-30 页面处理的方法

Publications (1)

Publication Number Publication Date
CN113377375A true CN113377375A (zh) 2021-09-10

Family

ID=77580440

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110739506.4A Pending CN113377375A (zh) 2021-06-30 2021-06-30 页面处理的方法

Country Status (1)

Country Link
CN (1) CN113377375A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114625439A (zh) * 2022-03-10 2022-06-14 腾讯音乐娱乐科技（深圳）有限公司 基于微前端架构的子应用运行方法、电子设备及存储介质

Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103530338A (zh) * 2013-10-01 2014-01-22 北界创想（北京）软件有限公司 在计算设备上进行页面渲染的框架及生成页面的方法
CN103699600A (zh) * 2013-12-13 2014-04-02 北京奇虎科技有限公司 网页快照的数据处理方法和浏览器
CN104021167A (zh) * 2011-12-28 2014-09-03 北京奇虎科技有限公司 一种浏览网页的方法及装置
CN105955888A (zh) * 2016-05-04 2016-09-21 腾讯科技（深圳）有限公司 一种页面调试预览方法及系统
CN106547608A (zh) * 2016-09-09 2017-03-29 北京安天电子设备有限公司 一种基于内存页主动合并技术的沙箱并发方法及系统
CN107515742A (zh) * 2017-07-18 2017-12-26 北京时医康科技发展有限公司 使Web页面访问移动APP本地资源的架构方法及系统
CN108830076A (zh) * 2018-05-03 2018-11-16 深圳市网心科技有限公司 提高浏览器安全性的方法、电子设备及存储介质
CN109101564A (zh) * 2018-07-16 2018-12-28 阿里巴巴集团控股有限公司 一种页面资源同时加载的方法、装置和电子设备
CN111259381A (zh) * 2020-02-04 2020-06-09 网易（杭州）网络有限公司 页面交互方法、装置、计算机可读介质及电子设备
CN112612449A (zh) * 2020-12-17 2021-04-06 深圳前海微众银行股份有限公司 一种网页页面的同步方法及装置、设备、存储介质

Patent Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104021167A (zh) * 2011-12-28 2014-09-03 北京奇虎科技有限公司 一种浏览网页的方法及装置
CN103530338A (zh) * 2013-10-01 2014-01-22 北界创想（北京）软件有限公司 在计算设备上进行页面渲染的框架及生成页面的方法
CN103699600A (zh) * 2013-12-13 2014-04-02 北京奇虎科技有限公司 网页快照的数据处理方法和浏览器
CN105955888A (zh) * 2016-05-04 2016-09-21 腾讯科技（深圳）有限公司 一种页面调试预览方法及系统
CN106547608A (zh) * 2016-09-09 2017-03-29 北京安天电子设备有限公司 一种基于内存页主动合并技术的沙箱并发方法及系统
CN107515742A (zh) * 2017-07-18 2017-12-26 北京时医康科技发展有限公司 使Web页面访问移动APP本地资源的架构方法及系统
CN108830076A (zh) * 2018-05-03 2018-11-16 深圳市网心科技有限公司 提高浏览器安全性的方法、电子设备及存储介质
CN109101564A (zh) * 2018-07-16 2018-12-28 阿里巴巴集团控股有限公司 一种页面资源同时加载的方法、装置和电子设备
CN111259381A (zh) * 2020-02-04 2020-06-09 网易（杭州）网络有限公司 页面交互方法、装置、计算机可读介质及电子设备
CN112612449A (zh) * 2020-12-17 2021-04-06 深圳前海微众银行股份有限公司 一种网页页面的同步方法及装置、设备、存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
李永宁: "qiankun 2.x运行时沙箱 源码分析", pages 1 - 28, Retrieved from the Internet <URL:https://juejin.cn/post/6885214342552223757> *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114625439A (zh) * 2022-03-10 2022-06-14 腾讯音乐娱乐科技（深圳）有限公司 基于微前端架构的子应用运行方法、电子设备及存储介质

Similar Documents

Publication Publication Date Title
US20210326397A1 (en) Systems and Methods for Hosted Applications
CN109697060B (zh) 视频特效系统及其生成方法、装置、设备和存储介质
US8983935B2 (en) Methods for utilizing a javascript emulator in a web content proxy server and devices thereof
US9081757B2 (en) Systems and methods for tracking and updating hosted applications
CN102073507B (zh) 微件Widget调用的方法、装置和系统
EP3090357B1 (en) Hosted application marketplaces
CN102043815B (zh) 一种互联网扩展广告的播放方法和扩展广告处理器
CN103678487A (zh) 一种网页快照的生成方法和装置
CN101937335B (zh) 一种生成Widget图标的方法、Widget摘要文件的生成方法及Widget引擎
CN106843901B (zh) 一种页面渲染和验证的方法和装置
CN110321504A (zh) 一种页面处理方法及装置
CN111880789A (zh) 页面渲染方法、装置、服务端和计算机可读存储介质
CN113377375A (zh) 页面处理的方法
CN113076501A (zh) 一种页面处理方法、存储介质及设备
CN110020370B (zh) 在客户端应用中实现动画的方法、装置及动画脚本的框架
CN115981650A (zh) 一种网站搭建方法及装置、电子设备、存储介质
Crowley Pro Internet Explorer 8 & 9 Development: Developing Powerful Applications for the Next Generation of IE
US20220244975A1 (en) Method and system for generating natural language content from recordings of actions performed to execute workflows in an application
CN117667169A (zh) 应用程序的更新方法、装置、电子设备及存储介质
CN110221952B (zh) 业务数据的处理方法及装置、业务数据处理系统
CN113987395A (zh) 基于云服务web监测的测试网站搭建方法与系统
CN114679491A (zh) 微前端服务应用方法、装置、存储介质及电子设备
Yberg Native-like performance and user experience with Progressive Web Apps
Kwon et al. Lightweight migration for web applications with framework separation
CN106528145A (zh) 实例系统及实例系统代理的版本管理方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination