在前端开发中，使用 iframe 可以很方便地在当前页面嵌入其他页面，实现诸如广告、视频播放等需求。而使用 npm 包 iframe 则可以更加高效地完成这一操作。本文将会详细介绍如何使用 npm 包 iframe 来实现嵌入其他页面的功能。
安装
首先需要安装 npm 包 iframe。在终端中输入以下命令，即可安装该包：
npm install iframe-resizer
使用
安装完毕后，在需要引入 iframe 嵌入其他页面的页面中，引入 iframe-resizer 包：
import 'iframe-resizer';
然后在需要嵌入的位置添加 iframe：
<iframe src="external-page.html"></iframe>
这里的 src 属性值应该改成需要嵌入的外部页面的链接，比如这里的 external-page.html 这个文件。
接下来需要对这个 iframe 进行初始化配置：
const iFrame = iFrameResize({
log: false,
enablePublicMethods: false,
scrolling: false,
heightCalculationMethod: 'max',
checkOrigin: false,
inPageLinks: true
}, 'iframe');这里的 iFrameResize() 函数会返回一个“控制器”对象实例，这个实例会被使用来控制 iframe 的各种行为和操作。我们使用的这个函数可以接收两个参数，第一个参数是一个“配置”对象，里面包含了对 iframe 行为的详细设定；第二个参数则是 iframe DOM 元素的选择器。
其中，常用的配置选项有：
- log：是否输出日志，默认为 false
- enablePublicMethods：是否允许在 iframe 内部执行控制器对象的公共方法，默认为 false
- scrolling：是否启用 iframe 的滚动条，默认为 false
- heightCalculationMethod：设置 iframe 的高度计算方式，默认为 'max'，意思是取最高者的高度。
- checkOrigin：是否启用 origin 检查，默认为 false
- inPageLinks：是否在 iframe 内部页内跳转时，将滚动条调整到目标标签位置，默认为 true
示例
下面是一个完整的示例代码：
-- -------------------- ---- -------
------
---------- ---------
------- ------------------------ ----------------------------
------- ----------------------------------------------------------
------- ------------------------------------------------------------------------------------------
--------
------------ -
----- ------ - --------------
---- ------
-------------------- ------
---------- ------
------------------------ ------
------------ ------
------------ ----
-- ------------------
---
---------
-------在这个例子中，我们引入了 jquery 和 iframe-resizer 这两个脚本，然后通过选择器 '#external-page' 获取到 iframe 元素。在控制器对象实例化之后，我们就可以在需要的时候调用控制器对象的各种方法，比如改变 iframe 的大小、设置 iframe 内容的滚动行为等等。
总结
使用 npm 包 iframe 可以很方便地在前端开发中嵌入其他页面。本文对使用 iframe-resizer 进行 iframe 嵌入的方法进行了详细介绍，并提供了示例代码。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/81565