如何 使 iframe 撑开页面

要使 iframe 撑开页面，可以通过以下方法：

1. 设置 iframe 的宽度和高度为 100%，这样它就会自动适应父容器的大小。

2. 在父容器中设置 overflow: hidden，这样 iframe 的内容超出父容器的部分就会被隐藏，而不会撑开页面。

3. 如果 iframe 中的内容高度不确定，可以使用 JavaScript 动态调整 iframe 的高度，使其与内容高度相等。可以使用以下代码：

var iframe = document.getElementById('myIframe');
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';

其中，myIframe 是 iframe 的 id，contentWindow.document.body.scrollHeight 是 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);

在iframe 高度不确定 并且是跨域的情况下 如何撑开页面

在这种情况下，可以使用JavaScript来动态调整iframe的高度，使其与内容高度相匹配。具体实现方法如下：

1. 在父页面中添加一个iframe元素，并设置其src属性为跨域页面的URL。

2. 在父页面中添加一个JavaScript函数，用于获取iframe中内容的高度，并将其设置为iframe的高度。

3. 在跨域页面中添加JavaScript代码，用于将内容高度传递给父页面。

4. 在跨域页面中添加一个定时器，用于定期检测内容高度是否发生变化，并将其传递给父页面。

具体实现代码如下：

在父页面中：

<iframe id="myFrame" src="https://example.com"></iframe>

<script>
function resizeFrame() {
  var frame = document.getElementById("myFrame");
  var height = frame.contentWindow.document.body.scrollHeight;
  frame.style.height = height + "px";
}

window.onload = function() {
  resizeFrame();
  setInterval(resizeFrame, 100);
};
</script>

在跨域页面中：

<script>
function sendHeight() {
  var height = document.body.scrollHeight;
  parent.postMessage({height: height}, "*");
}

window.onload = function() {
  sendHeight();
  setInterval(sendHeight, 100);
};

window.addEventListener("resize", sendHeight);
</script>