在bootstrap的标签页中嵌入iframe,页面只不能显示全,仅显示一个表框的大小

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在bootstrap的标签页中嵌入iframe,页面只不能显示全,仅显示一个表框的大小相关的知识,希望对你有一定的参考价值。

如何才能让这个iframe的整个页面完全的显示

参考技术A <script type="text/javascript" language="javascript">
$(function()
resize();
$(window).resize(function()
resize();
)
/* setTimeout(function()
$("#centerContent").scrollTop(0);//通过scrollTop设置滚动到0位置
,5000)
*/

)
function load()
$("iframe").contents().find("html,body").scrollTop(0);


</script>

function resize()
var setHeight = $(window).height()-64-41;
$('#centerContent').css('height',setHeight+'px')

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

  前段时间有这么个需求,在游戏页添加个活动页;最开始呢,把页面写好了,并在页面中添加了游戏的 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);

    } ();
}

 

以上是关于在bootstrap的标签页中嵌入iframe,页面只不能显示全,仅显示一个表框的大小的主要内容,如果未能解决你的问题,请参考以下文章

怎么在bootstrap标签页中添加删除按钮

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

如何用iframe在网页中插入另一个网页的一部分内容,做成页中页

文档的几何形状和滚动

如何让iframe动态改变,单是却不刷新父页

限制bootstrap 3分页中显示的页数