在游戏页中添加页面无法正常显示

Posted 2020-10-29 莫问、前程

　　前段时间有这么个需求，在游戏页添加个活动页；最开始呢，把页面写好了，并在页面中添加了游戏的 iframe；

然后准备测试功能了；出现问题了，先是活动页盖在游戏页上，玩不了游戏；再就是可以玩游戏，活动页，弹窗不能正常显示。

解决办法：

　　因为 iframe 内嵌的游戏层级会非常的高，所以我们需要在弹窗的 div 下面垫一层 iframe；

<div class="act-page">
    <iframe class="iframe-game" width="100%" height="100%" src="gameurl"
      frameborder="0" scrolling="no" allowtransparency="true"></iframe>

    <div class="act-content">
      <div class="iframe-high">
        活动页面
      </div>
      <iframe id="base-iframe" class="base-iframe" scrolling="no" frameborder="0"></iframe>
    </div>
</div>


<div class="act-layer">
   <div class="iframe-high">
      弹窗
   </div>
  <iframe class="base-iframe" scrolling="no" frameborder="0"></iframe>
</div>

 

这样页面活动页可以显示出来；但是这样会出现一个问题，页面呈现一段时间后又消失了（好像是 ie 的bug）~~~~

解决办法：

if (!!window.ActiveXObject || "ActiveXObject" in window) {
    var iframeShow = function () {
        var iframeShim = $("#base-iframe");
        var add = true;

        function changeHeight() {
            var height = $(window).height();

            if (add) {
                height--;
            }
            add = !add;

            iframeShim.css("height", height);
        }

        setInterval(changeHeight, 300);

    } ();
}