javascript - iframe 随内容变化自动调整高度

Question

我有一个 iframe，您可以在以下链接中看到；-

http://one2onecars.com

iframe 是屏幕中央的在线预订。我遇到的问题是，尽管 iframe 的高度在页面加载时没问题，但我需要它以某种方式在页面内容调整时自动调整高度。例如，如果我在在线预订中搜索邮政编码，它会创建一个下拉菜单，然后使“下一步”按钮不可见。

我需要做的是，当在线预订的内容发生变化时，iframe 自动调整到 iframe 的新高度(动态)，因为它没有加载任何其他页面。

我已经使用 jquery 尝试了几种不同的脚本来尝试解决这个问题，但它们似乎都只在页面首次加载时自动调整 iframe 的高度，不是作为 iframe 的内容变化。

这甚至可以做到吗？

我目前拥有的代码目前设置了高度:-

        <div id="main-online-booking">

            <iframe id="main-online-frame" class="booking-dimensions" src="http://www.marandy.com/one2oneob/login-guest.php" scrolling="no" frameborder="0"></iframe>

        </div>

#main-online-booking {
    height: 488px;
    border-bottom: 6px #939393 solid;
    border-left: 6px #939393 solid;
    border-right: 6px #939393 solid;
    z-index: 4;
    background-color: #fff;
}


.booking-dimensions {
    width: 620px;
    height: 488px;
}

如果有人能帮助我，我将不胜感激!

Answer 1

设置间隔

唯一的 (由于浏览器技术的进步而更正，参见 David Bradshaw's answer) 向后兼容的方法是使用 setInterval 并自己关注 iframe 的内容。当它改变高度时，您会更新 iframe 的大小。不幸的是，没有这样的事件可以让您轻松收听。

一个基本示例，这仅在大小已更改的 iframe 内容是主页流的一部分时才有效。如果元素是 float 的或定位的，那么您将必须专门定位它们以查找高度变化。

jQuery(function($){
  var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
  setInterval(function(){
    curHeight = $frame.contents().find('body').height();
    if ( curHeight != lastHeight ) {
      $frame.css('height', (lastHeight = curHeight) + 'px' );
    }
  },500);
});

显然，根据您的需要，您可以修改此代码的透视图，使其从 iframe 自身运行，而不是期望成为主页的一部分。

跨域问题

您会发现的问题是，由于浏览器安全性，如果 iframe 与主页位于不同的主机上，它不会让您访问 iframe 的内容，因此实际上您无能为力，除非您有将任何脚本添加到 iframe 中出现的 html 的方法。

ajax

其他一些人建议尝试通过 AJAX 使用第三方服务，除非该服务支持此方法，否则您不太可能使用它——尤其是在预订时很可能需要通过 https/ssl 运行的服务。

看起来您可以完全控制 iframe 内容，您可以选择所有选项，带有 JSONP 的 AJAX 将是一个选项。但是，请注意一个字。如果您的预订系统是多步骤的，您需要确保您有一个设计良好的 UI——可能还有一些历史/片段管理代码——如果您要走 AJAX 路线。这一切都是因为您永远无法判断用户何时会决定在他们的浏览器中向前或向后导航(iframe 会在合理范围内自动处理)。设计良好的 UI 会分散用户的注意力。

跨域通信

如果您可以控制双方(这听起来像您所做的)，您还可以使用 window.postMessage 进行跨域通信选项 - 请参阅此处了解更多信息 https://developer.mozilla.org/en-US/docs/DOM/window.postMessage