在前端开发中，很多情况下我们需要在页面中引入其他网站或者页面的内容，比如广告或者嵌入式页面。这时候就需要使用 iframe 标签来实现。但如果需要在 iframe 中加载一个完整的页面，那么就需要使用到 npm 包 frame-loader。
什么是 frame-loader
frame-loader 是一个用于加载 iframe 中页面的 npm 包，它有如下特点：
- 可以自动调整 iframe 的高度以适应内容的变化；
- 可以在子页面中触发父页面的回调函数；
- 可以实现单页面应用（SPA）的效果。
安装和使用
首先需要安装 frame-loader，可以使用 npm 安装：
npm install frame-loader --save
安装完成后，在需要引入 iframe 的页面中，可以这样使用 frame-loader：
-- -------------------- ---- -------
-- -- ------------
------ ----------- ---- ---------------
-- -- ------ --------
-------------
---- ---------------------
------- -- -- -
------------------- -------
--
---------- ------ -- -
------------------- ------
-
---在这个例子中，我们设置了 iframe 的 url 属性为 example.com，当 iframe 加载完成时，会触发 onLoad 回调函数，当在 iframe 中使用 window.parent.postMessage() 方法发送消息时，将触发 onMessage 回调函数。
自适应高度
使用 frame-loader 可以自动适应 iframe 中内容的高度。在使用 frame-loader 时，可以通过设置 autoResize 属性来开启自适应高度功能：
frameLoader({
url: 'http://example.com',
autoResize: true
});当 autoResize 属性设置为 true 时，如果 iframe 中内容发生变化，frame-loader 将自动调整 iframe 的高度以适应内容的变化。
父子页面交互
在父页面和子页面之间可以通过 postMessage() 方法来交互数据。frame-loader 提供了 onMessage 属性来监听子页面发来的消息：
frameLoader({
url: 'http://example.com',
onMessage: (data) => {
console.log('收到消息', data);
}
});在子页面中可以这样发送消息：
window.parent.postMessage({ message: 'hello' }, '*');这将触发父页面中的 onMessage 回调函数，并将 { message: 'hello' } 作为参数传递给它。
实现 SPA 效果
frame-loader 还可以用于实现单页面应用（SPA）的效果。在使用 frame-loader 时，可以通过调用 load 方法来加载一个新的页面：
frameLoader.load('http://example.com/page2');这将在 iframe 中加载 example.com/page2 页面，并自动适应 iframe 的高度。同时，如果需要在子页面中触发父页面的回调函数，可以在子页面中使用 parent.frameLoader.postMessage() 方法。
总结
frame-loader 是一个非常实用的 npm 包，可以用来加载 iframe 中的页面，自适应高度，父子页面交互以及实现单页面应用的效果。希望本文提供的介绍和示例能够帮助大家更好地使用这个工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663b81e8991b448e23b2