html5 view的层级,cocos creator - WebView内部页面的交互和层级问题

我们知道creator里的WebView，VideoPlayer等特殊组件有一个非常严重的问题，就是不管你怎么设置层级，这类组件始终处于最上层！其他UI组件会被遮挡。

我们打开浏览器运行，F12检测元素就可以清楚的看到他们的层级关系。

如下图：

通过上图我们可以清楚的看到，video(videoPlayer组件) 和 iframe(webView组件) 在 canvas(GameCanvas) 上层，而我们creator内置UI组件都是在GameCanvas层渲染的，所以不管我们怎么改UI层级都无效。

其实除了上述的办法，还有一个解决方案，就是我们可以通过自己写一个简单的html页面来中转！

大致思路：

首先我们自己用nginx搭建一个简单的html页面，在通过webView组件加载我们自己的web页面，然后在我们自己的页面加载一些需要的video或者其他网页，一些需要显示在Video组件上层的组件我们就可以通过html标签来实现了(需要一点web知识)，然后和creator JS交互就可以了。

如何与 WebView 内部页面进行交互呢？：

可以参考一下

官方文档

个人感觉官方文档讲得不够全面。

我的实现如下：

首先我们先来看下官方的：

我们可以看到，Web平台上会出现跨域的问题，所以我们需要分别对web平台和移动平台做处理,

web平台：

在Web上我们可以通过window.postMessage 实现跨域消息传递：

cocos 发送消息到 web：

cocos JS：

this.webView._sgNode._renderCmd._iframe.contentWindow.postMessage(data, "*");

//如果因为版本原因 _sgNode 被舍弃了，可以换成以下

this.webView._impl._iframe.contentWindow.postMessage(data, "*");

这里需要注意的是：我们必须等webView加载完成之后才能发送。

html JS：

//接收来自cocos的消息

window.addEventListener('message', function (e) {

var data = e.data;//参数

console.log("-----------message--------------", data)

});

web 发送消息到 cocos：

html JS：

//browser 浏览器下，向cocos发送消息

parent.postMessage("------------hello!-----cocos---------", "*")

cocos JS：

if (cc.sys.isBrowser) {

//这里是浏览器环境下， 接收web传过来的消息

window.addEventListener('