如何根据内容动态调整iframe高度？解决移动端滚动问题

你的代码失效核心原因是跨域安全限制：浏览器的同源策略不允许父页面直接访问不同域名下iframe内部的DOM内容，所以你无法通过contentWindow.document获取到iframe的实际高度。

针对你的场景，给出以下可行方案：

方案一：使用Acuity官方自适应嵌入代码 #

Acuity Scheduling本身提供了支持自动调整高度的嵌入方式，替代直接写iframe标签：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function() {
    var iframe = $('<iframe id="calendario" frameborder="0" scrolling="no" allowtransparency="true" src="https://app.acuityscheduling.com/catalog.php?owner=31548557&amp;category=A320+Basic"></iframe>');
    $('#你要插入的容器ID').append(iframe);
    iframe.load(function() {
      iframe.height(iframe.contents().find('body').height());
      // 监听内容变化（适配Acuity内部动态内容切换）
      setInterval(function() {
        var newHeight = iframe.contents().find('body').height();
        if (newHeight !== iframe.height()) {
          iframe.height(newHeight);
        }
      }, 500);
    });
  });
</script>

如果仍遇跨域问题，直接登录你的Acuity账号，在嵌入设置里选择「自适应高度」选项生成官方代码，官方工具会自动处理跨域适配逻辑。

方案二：临时兜底的CSS处理 #

如果暂时无法调整嵌入方式，可以通过CSS强制隐藏滚动条，同时设置足够的最小高度避免内容截断：

#calendario {
  width: 100%;
  min-height: 1200px; /* 根据移动端实际内容高度调整数值 */
  overflow: hidden;
  border: none;
}

这种方式是权宜之计，不如方案一灵活，但能快速解决移动端滚动的UX问题。

原代码无效的原因 #

app.acuityscheduling.com和你的域名flypont.com不属于同一域名、协议、端口，浏览器会阻止父页面访问iframe的contentWindow对象，因此无法获取到scrollHeight值。

内容的提问来源于stack exchange，提问作者Simone Apicella