iframe高度自动撑开

如果你想要让 iframe 的高度自动撑开以适应内容的高度，可以使用以下的方法：

1. 使用 JavaScript 自动计算高度

可以通过 JavaScript 获取 iframe 内容的高度，然后设置 iframe 的高度。具体代码如下：

var iframe = document.getElementById('myiframe');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
iframe.style.height = innerDoc.body.scrollHeight + 'px';

这段代码会获取 id 为 myiframe 的 iframe 元素，然后获取它内部文档的高度，最后将 iframe 的高度设置为文档高度。

2. 使用 CSS 的 height: auto 属性

在 CSS 中，可以将 iframe 的高度设置为 auto，这样 iframe 将会自动根据内部内容的高度进行撑开。具体代码如下：

iframe {
  height: auto;
}

这种方法比较简单，但是需要注意的是，某些浏览器可能不支持该属性。

相关问题

vue iframe高度自适应撑开

在Vue中实现iframe高度自适应撑开的方法如下：

1. 在Vue组件中创建一个data属性来存储iframe的高度：

data() {
  return {
    iframeHeight: 0
  }
}

2. 在组件的template中使用v-bind指令将data中的iframeHeight绑定到iframe元素的height属性上：

<iframe :src="yourIframeUrl" :style="{ height: iframeHeight + 'px' }"></iframe>

3. 在mounted钩子函数中，给iframe元素添加一个load事件监听器，并在回调函数中设置iframeHeight为iframe内容的实际高度：

mounted() {
  const iframe = document.querySelector('iframe');

  iframe.addEventListener('load', () => {
    this.iframeHeight = iframe.contentWindow.document.body.scrollHeight;
  });
}

通过上述步骤，当iframe加载完成后，通过获取iframe内部内容的高度将其赋值给data属性中的iframeHeight，从而实现了iframe高度的动态自适应撑开。

iframe 用内容撑开iframe高度

可以通过获取iframe中页面的高度来设置iframe的高度，具体方法如下：

// 获取iframe中页面的高度
var height = document.documentElement.scrollHeight || document.body.scrollHeight;
// 设置iframe的高度
document.getElementById('iframe').height = height + 'px';

另外，也可以通过获取iframe内部容器的高度来设置iframe的高度，具体方法如下：

const resizeIframeHeight = iframeEl => {
  const iframeWindow = iframeEl.contentWindow || iframeEl.contentDocument.parentWindow;
  if (iframeWindow.document.body) {
    // 获取主容器高度，iframe内的DIV容器高度是会自己撑开的
    const height = iframeWindow.document.querySelector('#app').offsetHeight;
    iframeEl.height = height + 'px';
  }
}

const timerId = setInterval(() => {
  // 选中iframe
  const iframeEl = document.querySelector('#iframe');
  resizeIframeHeight(iframeEl);
}, 200);