前言
随着网页应用及其复杂性的不断增长，前端技术栈的范围也在不断扩大，但在这个复杂的世界里，有一些小小的细节却要求我们思考和解决。其中一项就是，当我们在一个页面中嵌入一个 iframe 时，如何让其自适应高度。
介绍
幸运的是，我们有一个方便的工具来解决这个问题，那就是 npm 包 @beisen/natureui-iframe-autosize。它是由贝所创新团队开发的，用于使 iframe 自适应高度，而不需要手动处理。
安装
你可以通过 npm 安装该包：
npm install @beisen/natureui-iframe-autosize --save
使用
使用该工具包很简单，只需要传入待自适应高度的 iframe 的选择器即可。例如，如下示例：
-- -------------------- ---- -------
------- ------------------------ ------------------------------------
------- ----------------------------------------------------
--------
---------------
-------- -
--------------------------
-
---
---------在这里，我们将选择器设置为 .iframe-auto-height。这意味着，在加载该页面时，在最顶部的自定义 JavaScript 文件中调用该函数，就可以自动适应高度。调用方式如下：
BSGlobal.use('natureui-iframe-autosize').autoSize('.iframe-auto-height');这就是自适应高度功能的全部，十分方便！
示例
你可以通过以下示例体验 @beisen/natureui-iframe-autosize 的使用：
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------ -------------
-------
---------- -
------- --
-------- --
----------- -----
-
--------------- -
------- -----
-------- -----
------- --- ----- -----
-
--------------- ------ -
-------- ------
------- -----
-
--------
-------
------
-----------
--- ------------------
--- -----------------------
----------- ------
--------------------
------- --------------------------- ------------------------------------
-----
--- -----------------------
----------- ------
---------------------- ---- -------
------- ------------------------------------- ------------------------------------
-----
-----
------- ----------------------------------------------------
--------
---------------
-------- -
--------------------------
-
---
-------------------------------------------------------------------------
---------
-------
-------总结
通过使用 @beisen/natureui-iframe-autosize 这个便捷的 npm 包，我们可以方便地使 iframe 自适应高度，避免了手动根据其内部内容进行高度调整的复杂性问题。这个包可以帮助我们更好地聚焦于其他前端开发相关的细节，从而提高我们的生产力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/beisen-natureui-iframe-autosize