[发明专利]页面处理的方法

说明书

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

技术领域

本申请涉及前端设计技术领域，具体而言，涉及一种页面处理的方法。

背景技术

近年来涌现出很多的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的写操作内容；改写预定目标方法，使得新创建的元素以及第一预设标签均挂载在目标子页面对应的第二预设标签内。