一个页面上的多个Iframe缩放问题

时间:2016-02-17 15:08:39

标签: javascript html css iframe responsive-design

我试图在一个页面上将两个响应iframes放在一起。 很遗憾,iframe的内容正在调整,但iframe边框的高度不会改变,因此当您重新调整窗口大小时,两个iframe之间的上限会增加。我希望你能看出我的意思。我该怎么做才能避免这种差距?

function adjustIframes() {
  $('iframe').each(function() {
    var
      $this = $(this),
      proportion = $this.data('proportion'),
      w = $this.attr('width'),
      actual_w = $this.width();

    if (!proportion) {
      proportion = $this.attr('height') / w;
      $this.data('proportion', proportion);
    }

    if (actual_w != w) {
      $this.css('height', Math.round(actual_w * proportion) + 'px');
    }
  });
}
$(window).on('resize load', adjustIframes);
iframe {
  margin: 5px;
}
<center>T E S T T O P</center>
<iframe frameborder="0" height="600" src="http://danielsalaw.de/Bilder/Melli/indexRev.html" width="100%"></iframe>
<iframe frameborder="0" height="600" src="http://danielsalaw.de/Bilder/Kocha/indexRev.html" width="100%"></iframe>
<center>T E S T B O T T O M</center>

2 个答案:

答案 0 :(得分:0)

你需要添加包装元素以使iframe响应(至少没有javascript hack)。

这是一个没有javascript(不需要它)的工作示例:

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .wrap {
      position: relative;
      padding-bottom: 52.68%;
      padding-top: 30px;
      height: 0;
      overflow: auto;
      -webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY
      border: solid black 1px;

    }
    <center>T E S T T O P</center>
    <div class="wrap">
      <iframe frameborder="0" src="http://danielsalaw.de/Bilder/Melli/indexRev.html"></iframe>
    </div>
    <div class="wrap">
      <iframe frameborder="0" src="http://danielsalaw.de/Bilder/Kocha/indexRev.html"></iframe>
    </div>
    <center>T E S T B O T T O M</center>

这里唯一的问题是您需要知道iframe所需的宽高比。基本上在这里我只是把高度除以你原来的iframe的宽度(= 52.68%),然后在填充黑客中使用它。

基本上从这个关于使iframe响应的答案中获取: Refresh()

答案 1 :(得分:-1)

IFrame高度可能很痛苦,因为iframe中的内容是独立于父级布局的,所以你不能用CSS真正设置它并调整高度(如Oke Henrik Skogstream所说)。

如果您不知道iframe内容的高度,那么您将不得不使用来自内部 iframe的javascript来破解它。

请点击此处查看简单的JavaScript hack:https://github.com/jcharlesworthuk/reactive.iframes