[发明专利]在浏览器中弹出html页面遮盖citymaker三维引擎的方法

说明书

本发明提出了一种在浏览器中弹出html页面遮盖citymaker三维引擎的方法，在三维弹出窗内部使用PostMessage发送消息给父级页面。父级页面接收到消息后，三维引擎为当前场景截图，并将截图输出到指定位置返回URL，暂停三维引擎的渲染。然后将截图的URL设置到父级页面中三维引擎所在区域，以达到模拟三维引擎还在浏览器中的效果。本发明提供了基于ActiveX的三维引擎内部与外部浏览器页面交互的方式，增强了页面的表现方式，丰富了产品的表现形式。

技术领域

本发明涉及_计算机网络信息传输技术领域，尤其涉及一种在浏览器中弹出html页面遮盖citymaker三维引擎的方法。

背景技术

在互联网时代，浏览器就是用来渲染页面，比如京东、淘宝、天猫等网站，就是在页面上通过HTML标签，展示丰富多彩的内容，吸引人们购买不同的商品。所以浏览器页面，尤其屏幕中间部分，就相当于城市核心区域的CBD(Central Business District，中央商务区)，寸土寸金，UI设计师通常会在这里添加很多的炫酷的交互效果。

Citymaker是国内成熟领先的城市三维模型提供商，伟景行科技的三维引擎在国内三维城市模型中占有较大的市场份额。它的三维引擎可以嵌入到IE浏览器中，并兼容搜狗、360、FireFox等浏览器，使得三维场景展示不再受限于客户端应用程序，可以通过浏览器随时访问。达到瘦客户端，胖服务器的效果。在这样的技术趋势下，工程师对三维引擎在浏览中更绚丽展现效果，愈加的追求。

Citymaker三维引擎有截屏、暂停渲染、恢复渲染、写本地文件的能力。其中三维引擎一旦停止渲染，三维引擎所在区域就和普通的html元素一样，遵循w3c规范，可以被覆盖，可以被遮挡。

目前全球主流浏览器内嵌的三维引擎，基本上都采用和伟景行类似——基于ActiveX的技术，只是三维渲染的效果不同。

不过这种基于ActiveX的技术也有其本身的技术缺陷。因为是基于ActiveX，三维引擎在浏览器窗口的最上层，高于任何html页面元素，虽然三维引擎内部可以弹出三维一个htmlWindow(类似一个对话框)的窗口，但是这个窗口隶属于三维引擎，不属于浏览器，导致任何HTML页面，无法覆盖到引擎之上。

单页Web应用SPA(single page web application，SPA)，就是只有一张Web页面的应用。单页应用程序(SPA)是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。

SPA是业内主流的实现前端页面的方式，借助三维引擎的大数据可视化，就基于这种技术。这也导致前端的交互都要在一个页面上完成，如果某一个区域无法用于展现内容，会让整个页面的表现张力下降。

也就是说，目前citymaker7.0引擎采用的是基于activeX插件的技术。相当于在浏览器中启动了一个应用程序，用来显示三维场景，这就导致三维引擎会在浏览器内容区域的最上方，HTML页面无法覆盖三维引擎。因此三维引擎所在区域只能显示三维地图，无法展现html页面，极大的限制了前端的表现效果。因此，三维引擎作为大数据可视化的主角，占据屏幕中央大部分面积，但却不允许其他的HTML页面覆盖到其上方，导致常见的诸如弹出窗口等基本交互都无法实现，使得浏览器的交互特性被大大的削弱了，无论是前端工程师还是UI设计师对此都苦恼不已，感觉像是被人束缚了手脚。

发明内容

针对现有技术中存在的缺陷或不足，本发明所要解决的技术问题是：突破现有技术中的各种限制，解决三维内部弹窗中的html页面与外部浏览器的通信，并且可以在浏览器上弹出html页面，对三维引擎进行遮罩。

为了实现上述目的，本发明采取如下技术方案：