Question

我试图在一个页面上将两个响应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>

Answer 1

你需要添加包装元素以使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()

Answer 2

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

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

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

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

2 个答案: