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

Multiple Iframes on one page scaling issue

本文关键字：Iframe 缩放 问题 一个      更新时间：2023-09-26

我试图将两个响应式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>

你需要添加包装器元素来使iframe响应(至少没有javascript黑客(。

这是一个没有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 响应的答案：https://stackoverflow.com/a/27836998/900271

IFrame 高度可能很痛苦，因为 iframe 内的内容是独立于父级布局的，因此您无法真正使用 CSS 设置它样式并获得高度进行调整(正如 Oke Henrik Skogstream 所说(。

如果你不知道iframe内容的高度，那么你将不得不从iframe内部用javascript破解它。

请参阅此处了解一个简单的JavaScript黑客：https://github.com/jcharlesworthuk/reactive.iframes

相关文章：