Layer - html父网页-unity webgl子页面-unity三者信息进行交互

Layer - html父网页-unity webgl子页面-unity三者信息进行交互

前言

上一篇文章介绍使用Layer.Open显示unity3d webGL网页弹窗，这篇介绍Layer - html父网页与unity webgl子页面信息进行交互，直接进入正题。

一、unity与unity webgl 网页js进行通信交互

网上有很多教程，Unity3D开发之unity和js通信交互，旧版和新版都有。

1.Unity发送消息给JS

这里为了方便使用的是旧版的方法，这里是将unity发送消息给unity webgl网页。
unity使用的代码如下：

Application.ExternalCall("UnityFunClick", "调用了UnityFunClick这个方法！");

webgl 网页代码：

 <script>
        function UnityFunClick(str)
		{
		    alert(str);
		}
 </script>

效果如下：

2.webgl网页发消息给unity

webgl发消息给unity，这里第一个参数是unity的物体，第二个参数是挂载这个物体上脚本里的方法，第三个参数是值：

        function UnityFunClickBT()
		{
			gameInstance.SendMessage("Canvas","HtmlFunMas","这是来自webgl网页的消息！");
		}

unity里代码：

    public void HtmlFunMas(string msg)
    {
        TipPanelManager._instance.InstanceOneButtonTipPanel(transform, msg);//这是我写的提示框
    }

效果如下：

二、html父网页-unity webgl子页面信息进行交互

1.html父网页发消息给unity webgl子页面

上篇文章我们已经实现了html父网页调出unity webgl子页面弹窗使用Layer.Open显示unity3d webGL网页弹窗，现在我们来实现html父网页发消息给unity webgl子页面。
在Layer.Open方法里添加两个按钮，第一个是给webgl网页传值，第二个是关闭弹窗，代码如下：

                btn: ['测试', '关闭'],
                yes: function (index) {
                    var iframeWin =  window['layui-layer-iframe' + index]; 
					iframeWin.UnityFunClick("这是来自于父网页的信息");   
                },
                btn2: function (index) {
                    layer.close();
                },

webgl网页代码：

        function UnityFunClick(str)
		{
		    alert(str);
		}

效果如下：

2.unity webgl子页面发消息给html父网页

unity webgl子页面代码如下：

        function UnitySendMsgClick()
		{
			parent.firstMethod("这是webgl网页消息！");
		}

html父网页代码如下：

        function firstMethod(str){
            alert(str);
        }

来测试下效果：

总结

实现了这两种通信，那么我们就可以实现HTML父网页给unity发消息或unity给HTML父网页发消息，核心就是必须通过webgl子页面这个“中间商”来通信，步骤为HTML父网页传值给webgl子页面，再通过webgl传值给unity，反过来，也可以完成unity到Html父页面的通信。