【问题标题】:Iframe mobile responsivnessiframe 移动响应式
【发布时间】:2017-07-06 17:43:37
【问题描述】:

我有一个页面,我希望在同一页面上显示多个幻灯片,但事实证明这对于 JavaScript 变量有点困难,因此我决定将每个幻灯片都设为 iframe。这工作得很好,但是现在 iframe 的响应性正在引起问题。 Iframe 中的幻灯片是 div 元素,将根据屏幕大小进行堆叠。现在的问题是 iframe 不会变长。我试过了:

<iframe src="Web.html"  height="100%" frameborder="1" marginheight="0" marginwidth="0" scrolling="no"></iframe>

除了即使在调整大小之前也无法使 iframe 足够长。我的问题是,如何使 iframe 与页面一样高,并且页面会调整大小?

【问题讨论】:

    标签: javascript html css iframe mobile


    【解决方案1】:

    尝试 Bootstarp 响应式嵌入。

    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="..."></iframe>
    </div>

    这里是:http://getbootstrap.com/components/#responsive-embed

    【讨论】:

    • 感谢您的建议,但是当 iframe 宽度变小时,高度需要保持不变,因为内容,我不能滚动。
    【解决方案2】:

    我找到了使用 resizeIframe 函数的解决方案

      <iframe src="Other.html" frameborder="0" scrolling="no" onload="resizeIframe(this);"></iframe>
    
     function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    

    }

    【讨论】:

    • 这不是很有帮助,因为你只显示了onload,resizeIframe函数呢?
    • 我添加了忘记的JS道歉
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多