在前端开发中，嵌入外部网页是非常常见的需求。但是，不同网页的高度和宽度可能会不同，这时候就需要动态调整 iframe 大小来适应内容。iframe-resizer 是一个 JavaScript 库，可以自动调整 iframe 的大小，让 iframe 更加灵活、自适应。
安装
使用 npm 安装 iframe-resizer：
npm install iframe-resizer --save
使用
基本用法
只需在父页面引入 iframeResizer.contentWindow.min.js，在子页面引入 iframeResizer.min.js，然后在父页面的 JavaScript 中添加以下代码即可实现自适应：
// 父页面 JavaScript
import { iframeResizer } from 'iframe-resizer';
iframeResizer({ log: true }, '#myIframe');<!-- 父页面 HTML --> <iframe src="child.html" id="myIframe"></iframe>
// 子页面 JavaScript
import { iframeResizer } from 'iframe-resizer';
iframeResizer({}, '#myIframe');如果父页面和子页面在同一个域名下，会自动获取子页面的高度和宽度。如果不在同一个域名下，需要在子页面的 JavaScript 中设置一个 resize() 方法，用来发送高度和宽度给父页面：
-- -------------------- ---- -------
-- --- ----------
------ - ------------- - ---- -----------------
---------------
------------------------ -------------
---------------- ---------- -
----------------------
-
---高级用法
iframe-resizer 提供了很多配置项，可以满足各种需求。以下是一些常用的配置项：
heightCalculationMethod：设置高度计算方式，默认为"bodyScroll"，即计算整个文档的高度；如果子页面只有一个元素需要自适应高度，则可以设置为"bodyOffset"，即计算该元素的高度。resizedCallback：设置当 iframe 大小调整时的回调函数，可以在该函数中执行一些操作，比如发送通知给父页面。checkOrigin：设置是否检查来源，防止 XSS 攻击。
-- -------------------- ---- -------
-- --- ----------
------ - ------------- - ---- -----------------
---------------
---- -----
------------------------ ----------------
----------------------- ------------------ ---------
---------------- ---------- -
------------------- ---- -----------
--
------------ -----
-- -------------<!-- 父页面 HTML --> <iframe src="child.html" id="myIframe"></iframe>
-- -------------------- ---- -------
-- --- ----------
------ - ------------- - ---- -----------------
---------------
------------------------ ----------------
--------------- ---------
---------------- ---------- -
----------------------
-
---总结
iframe-resizer 可以让 iframe 更加灵活、自适应，避免出现滚动条或者留白的问题。在实际开发中，我们可以根据具体情况选择不同的配置项，满足各种需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33788
