如何在 JavaScript 中设置高度为 100% 的全屏 iframe？

在开发 Web 应用时，设置全屏 iframe 是一个常见的需求。下面介绍如何使用 JavaScript 设置高度为 100% 的全屏 iframe。

方法一：使用 CSS

可以通过在父级元素中使用 CSS 将 iframe 元素的高度设置为 100%。具体方法如下：

html, body, iframe {
  height: 100%;
  margin: 0;
}

然后在 JavaScript 中设置 iframe 的源地址即可：

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
document.body.appendChild(iframe);

以上代码将创建一个位于页面底部的全屏 iframe，其高度等于浏览器窗口的高度。

方法二：使用 JavaScript

如果不希望使用 CSS，也可以通过 JavaScript 来设置 iframe 的高度。具体方法如下：

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);

function setHeight() {
  iframe.style.height = window.innerHeight + 'px';
}

window.addEventListener('resize', setHeight);
setHeight();

以上代码将创建一个位于页面底部的全屏 iframe，并在窗口大小改变时动态调整其高度。其中，window.innerHeight 表示浏览器窗口的高度。

方法三：使用第三方库

除了上面介绍的方法，还可以使用一些现成的第三方库来实现全屏 iframe。例如，可以使用 iframe-resizer：

首先需要通过 npm 安装 iframe-resizer：

npm i iframe-resizer --save

然后在 JavaScript 中使用以下代码：

import iframeResizer from 'iframe-resizer';

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
document.body.appendChild(iframe);

iframeResizer({iframe: iframe});

以上代码将创建一个位于页面底部的全屏 iframe，并使用 iframe-resizer 来自动调整 iframe 的高度。

总之，有多种方法可以实现设置高度为 100% 的全屏 iframe。开发者可以根据具体需求选择最适合自己的方法。