今天遇到一个需求打包成WebGL之后要当做一个iframe，嵌入到别的网页中，其中遇到两个难题。

1.要增加一个全屏模式。

2.全屏的时候使用unity中的title，非全屏的时候要使用网页本身的title。

全屏一开始使用webkitRequestFullScreen，直接控制全屏发现，当点击全屏后，画面出现拉伸，需要点击一下才会回复正常的画面。没有找到有效的解决方法。

于是使用unity自己封装的方法来控制全屏吧。

修改打包后的CSS文件，将全屏按钮移动到画面中。

#unity-fullscreen-button {   position: absolute;

    bottom: 10px;

    width: 38px;

    height: 38px;

    right: 10px; background: url('fullscreen-button.png') no-repeat center }

 

 第二个问题，做好js调用unity中的代码，控制title的显示和隐藏，然后增加这个方法就可以监听浏览区是否进入全屏状态。

  window.onresize = function() {
    if (document.fullscreenElement) {
        console.log('进入全屏')
        unityInstance.SendMessage("JSToUnity","Show");
    } else {
        // TODO...
        console.log('退出全屏')
        unityInstance.SendMessage("JSToUnity","Close");
    }
};