在开发 Web 网站时，我们经常需要在网页中嵌入iframe，以实现一些特定的效果，而iframe 的大小调整难度较大，网页的响应布局也因此存在一定的挑战。 npm 包 @lassehaslev/iframe-scaler 便是一款解决 iframe 调整大小的优秀工具。
安装
在使用 @lassehaslev/iframe-scaler 之前，需要先安装它。使用 npm 进行安装：
--- ------- --------------------------
此时就可以在项目中使用这个工具了。
使用
基本使用
在使用 @lassehaslev/iframe-scaler 时，需要满足以下条件：
iframe 和包含 iframe 的页面在同一域名下，否则会出现跨域问题。
父级和 iframe 所在页面需要使用同一种测量单位，比如像素（px）。
使用 @lassehaslev/iframe-scaler 时，需要在父级页面中引入以下 JavaScript 代码：
-- -- ------------- --- ------------ - -------------------------------------- -- -------------------------- --- -------------------- - ------------- ------------------ --------- -- -- -- ------ ------- ----------------------------
上述代码中，.iframe-wrapper 是放置 iframe 的容器元素的选择器，.iframe 是 iframe 元素的选择器。调用 iframeScaler 方法后，需要调用 init() 方法开始调用。
在 iframe 页面中，需要在 html 标签中加入以下代码：
---- ---------- --- ----- ------------------------ --
当 iframe 中的内容高度改变时，iframe-wrapper 会重新计算高度，以控制 iframe 最终的大小。
指定最小高度
在一些情况下，iframe 的高度需要达到一个最小高度。此时，可以在父页面的 JavaScript 中设置参数：
--- -------------------- - ------------- ------------------ ---------- -
---------- ---
- --上述代码中，minHeight 参数代表 iframe 最小的高度，这里设置的是 500 像素。
让 iframe-frame 触发大小调整
如果在 iframe 页面中需要触发大小调整，则可以在 iframe 页面中绑定事件，在 window.onload 事件发生时调用父页面的 iframeScalerInstance.doResize() 方法：
-- - ------ ---
-- -----------------------------
------------- - ---------- -
-- ------------------
----------------------------------------------
--示例代码
父页面代码
--------- -----
------
------
----- ----------------
-------------------- ------------
------ ----------------
---- -
------- --
-
--------------- -
------ -----
----------- ------
-------------- -----
-
------- -
------ -----
------- -----
------- -----
-
--------
-------
------
---- -----------------------
------- -------------- -----------------------------
------
---- -----------------------
------- -------------- -----------------------------
------
------- -----------------------------------------
------- -----------------------
--- ------------ - --------------------------------------
--- -------------------- - ------------- ------------------ ---------- -
---------- ---
- --
----------------------------
---------
-------
-------iframe 页面代码
--------- -----
----- -------------------------
------
----- ----------------
-------------------- -- - --------------
-------
------
----------------- -- - -----------
---------------- ------------- ----------
-- ------------------- --------------------------------------------------- ----------
------- -----------------------
------------- - ---------- -
----------------------------------------------
--
---------
-------
-------通过以上代码，在父页面中，放置两个 iframe 元素，并使用 @lassehaslev/iframe-scaler 进行调整大小，并设置最小高度为 500 像素。在 iframe 页面中，展示基本内容，并提供一个触发 resize 的按钮。在加载完 iframe 后，可以完成大小的调整。
总结
使用 @lassehaslev/iframe-scaler，可以使我们更好地控制 iframe 的大小调整。通过本篇文章，我们对其使用方法进行了详细介绍，并提供了示例代码，希望能对那些在前端开发中需要处理 iframe 调整大小问题的开发者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055eb781e8991b448dc694