CN108647066A - 在浏览器中弹出html页面遮盖citymaker三维引擎的方法 - Google Patents

Abstract

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

Description

在浏览器中弹出html页面遮盖citymaker三维引擎的方法

技术领域

本发明涉及_计算机网络信息传输技术领域，尤其涉及一种在浏览器中弹出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页面，对三维引擎进行遮罩。

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

一种在浏览器中弹出html页面遮盖citymaker三维引擎的方法，包括以下步骤：

S1、在父页面中，为三维引擎预留一个可用截图模拟所述三维引擎存在的位置；

S2、在所述三维引擎中，弹出一个htmlWindow；

S3、在htmlWindow中触发事件，利用html5的PostMessage接口发出跨域消息；

S4、父页面监听所述跨域消息；

S5、当父页面收到消息之后，截取当前三维场景的图片，并保存到指定的位置，同时返回保存图片的URL；

S6、停止渲染引擎，并且模拟引擎依然存在的效果；

S7、在父页面上弹出新的页面。

作为本发明的进一步改进，在父页面承载三维引擎的div中，嵌入一个img标签，并且隐藏所述img标签。

作为本发明的进一步改进，所述htmlWindow包含一个页面，该页面为子页面。

作为本发明的进一步改进，所述子页面为普通的html页面。

作为本发明的进一步改进，所述子页面上有一个按钮，点击所述按钮发送所述跨域消息。

作为本发明的进一步改进，所述父页面通过调用前端页面事件监听器addEventListener接口来监听所述跨域消息。

作为本发明的进一步改进，所述步骤S6中模拟引擎依然存在的效果具体为：将三维场景的图片URL赋值给三维引擎容器中img标签的src属性，然后隐藏三维引擎；一旦三维引擎被替换，就停止渲染。

本发明的有益效果是：本发明提供了一种全新的基于ActiveX的三维引擎内部与外部浏览器页面交互的方式，增强了页面的表现方式，丰富了产品的表现形式。

附图说明

图1是html弹窗出现在三维引擎之上的效果图；

图2是本发明的方法流程图。

具体实施方式

下面结合附图说明及具体实施方式对本发明进一步说明。

大部分情况下，浏览器为了安全的考虑，还不允许脚本读取其他窗口的属性或调用其他窗口方法。不过在HTML5中，有一个window方法，是允许来自非同源脚本调用的：PostMessage方法，该方法允许有限的通信——通过异步消息传递的方式——在来自不同源的脚本之间。这类通信机制是在HTML5标准中定义的，所有主流的浏览器(包括IE8和更新版本)都已经实现了该通信机制。这项技术成为“跨文档消息传递”，而由于该API是定义在Window对象上的，而不是文档对象上的，因此，它又成为“窗口间消息传递”或者“跨域消息传递”。

三维场景中的htmlWindow，一般只用来展示一个静态页面，实现一些简单的交互，很少用于与父级页面之间的交互。本发明大胆创新，深入研究，尝试过多种技术方案后，最终决定采用HTML5的PostMessage方法打通引擎内部与外部页面的隧道，实现三维内部弹窗与父级窗口的交互。

本发明的原理是：在SPA应用中，我们可以让三维引擎先截取当前屏幕，并存储到服务器指定位置，并将图片地址返回。拿到图片地址，我们将地址赋给一个img标签或者给css的background-images、background属性，再停止三维引擎的渲染。然后让三维场景的截图显示在原三维引擎的位置。这样，当html弹出并遮挡到htmlWindow后，由于弹出窗类似于模态对话框，所以此时的三维引擎是可以看，但却不能点击的。那么我们用一张图片替代三维引擎展现地图，就达到了一种近似的，html弹窗出现在三维引擎之上的效果，如图1所示。

如图2所示，本发明的在浏览器中弹出html页面遮盖citymaker三维引擎的方法包括以下步骤：

S1、在父页面中，为三维引擎预留可以用截图模拟三维存在的位置。

在本发明的一个实施例中，在HTML页面承载三维引擎的div中，嵌入一个img标签，并且隐藏掉它。

S2、在三维引擎中，弹出一个包含页面的htmlWindow。

在本发明的一个实施例中，弹出的页面与普通的html页面没有任何差别。

S3、在htmlWindow中触发事件。

在本发明的一个实施例中，htmlWindow中的这个页面，有一个按钮，点击发送一条消息；或者以其他html5基本交互方式触发，比如hover等等。在这些交互事件的回调函数中，用html5的PostMessage接口发出一条消息：

otherWindow.postMessage(message,targetOrigin,[transfer])；

S4、父页面监听三维发出的跨域消息。

在本发明的一个实施例中，外部页面通过调用addEventListener(前端页面事件监听器)接口，来监听消息：

window.addEventListener("message",receiveMessage,false)；

S5、父页面响应

在本发明的一个实施例中，当父页面收到消息之后，截取当前三维场景的图片，并保存到指定的位置，同时返回保存图片的url(统一资源定位符，可以理解为网址)地址。

S6、停止渲染引擎，并且模拟引擎依然存在的效果。

在本发明的一个实施例中，将该引擎停止渲染，然后将三维场景的图片地址赋值给三维引擎容器中img标签的src属性。然后隐藏三维引擎，此时相当于三维引擎被一张截图替换，看起来还像是三维引擎在三维页面中。一旦三维引擎被一个图片替换，并且停止渲染。

S7、在外部页面弹出html页面

那么在页面中弹出一个窗口就和普通页面弹出一个窗口没什么区别了。但是此时html页面的弹窗就如同显示在三维引擎上一般，产生了一种全新的交互体验。经过实际产品的检验，这的确是一种很优秀的，全新的交互方式。

以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。

Claims (7)

1.一种在浏览器中弹出html页面遮盖citymaker三维引擎的方法，其特征在于，所述方法包括以下步骤：

S1、在父页面中，为三维引擎预留一个可用截图模拟所述三维引擎存在的位置；

S2、在所述三维引擎中，弹出一个htmlWindow；

S3、在htmlWindow中触发事件，利用html5的PostMessage接口发出跨域消息；

S4、父页面监听所述跨域消息；

S5、当父页面收到消息之后，截取当前三维场景的图片，并保存到指定的位置，同时返回保存图片的URL；

S6、停止渲染引擎，并且模拟引擎依然存在的效果；

S7、在父页面上弹出新的页面。

2.根据权利要求1所述的方法，其特征在于：在所述父页面承载三维引擎的div中嵌入一个img标签，并且隐藏所述img标签。

3.根据权利要求1所述的方法，其特征在于：所述htmlWindow包含一个页面，该页面为子页面。

4.根据权利要求3所述的方法，其特征在于：所述子页面为普通的html页面。

5.根据权利要求3或4所述的方法，其特征在于：所述子页面上有一个按钮，点击所述按钮发送所述跨域消息。

6.根据权利要求1所述的方法，其特征在于：所述父页面通过调用前端页面事件监听器addEventListener接口来监听所述跨域消息。

7.根据权利要求1所述的方法，其特征在于：所述步骤S6中模拟引擎依然存在的效果具体为：将三维场景的图片URL赋值给三维引擎容器中img标签的src属性，然后隐藏三维引擎；一旦三维引擎被替换，就停止渲染。