如果我们需要在我们的网页中嵌入其他网页，就需要使用 iframe。iframe 可以让我们在网页中嵌入其他网页，这些嵌入的网页可以是我们自己的网页，也可以是其他人的网页，同时可以带有不同的参数。但是在嵌入 iframe 时，我们需要解决 iframe 加载时与主页面的同源问题，并且需要对 iframe 的各种加载状态进行监控。在这篇文章中，我们将介绍一个 npm 包 load-iframe，用于解决这些问题并实现更好的 iframe 引入。
简介
load-iframe 是一个 npm 包，可用于加载其他网页的 iframe，并监测 iframe 加载的进度。此时，我们可以使用该 npm 包来添加 iframe 并监控加载状态，而无需自己编写各种复杂的代码。
基本使用很简单。首先，我们需要在我们的项目中安装 load-iframe：
npm install load-iframe --save
然后，在我们的 JavaScript 文件中，我们需要引入这个 npm 包：
import loadIframe from 'load-iframe'
接下来，在我们的 JS 代码中，我们只需要运行以下命令即可添加 iframe:
loadIframe(element, iframeUrl, options)
其中：
element是将要添加iframe的HTML元素
iframeUrl是要添加的iframe的URL
options是一个包含自定义选项的对象。可选的选项如下：
{ container: document.body, // iframe 的容器元素 name: "", // iframe 的名称属性 loadingText: "Loading...", // 加载状态显示的文本 style: {} // 可以定义 iframe 样式的对象 }
常规用法
我们可以使用 loadIframe 进行常规的 iframe 加载操作和监测。代码如下：
-- -------------------- ---- ------- ----- ------- - ------------------------------------ ----- --------- - --------------------- -- -------- ------------------- ---------- -- ------------ -------------------------------- -- -- - ---------------- ------ --- -------- --------- --
监测 iframe 的加载状态
在许多场景中，我们需要对 iframe 的各种状态进行监测以便在iframe的加载过程中进行操作。load-iframe 提供了多种不同的事件来监测这些状态。下面是一些可用于监测状态的事件：
-- -------------------- ---- ------- ----- ------- - ------------------------------------ -- -- ------ ---- -------------------------------- -- -- - ---------------- ------ --- -------- --------- -- -- -- ------ ---- ----------------------------------- -- -- - ---------------- ------ --- ------- --------- -- -- -- ------ ---- --------------------------------- -- -- - ------------------ --- -- ----- ------- --- -------- -- -- -- ------ ---- ---------------------------------- -- -- - ---------------- ------ ---- --- ---------- --
同时，我们还可以在选项中设置 loadingText 参数，以在 iframe 加载时显示其进度：
loadIframe(element, iframeUrl, options)
// options:
{
loadingText: "Loading..."
}iframe 的高级用法
如果我们需要访问其他窗口中的 iframe，需要使用 iframe.contentWindow 获取到 iframe 中的 window 对象。从 iframe.contentWindow 中获取的 window 对象在安全上下文上与主页面的 window 对象分离，因此它具有更少的权限和一些限制访问的属性和方法。我们可以使用 load-iframe 将向按需加载 iframe 进行较为复杂的通信。
以下是一个更高级的示例，其中包括了一个按钮，并在按钮的单击事件中向 iframe 发送 postMessage。在此示例中，我们需要引入和另一个 npm 包进行协作：
-- -------------------- ---- ------- ------ ---------- ---- ------------- ------ ----------- ---- -------------- ----- ------- - ------------------------------------ ----- --------- - --------------------- ------------------- ---------- - ----- ----------- -- ----- ------ - --------------------------------- -------------------------------- -- -- - ----- ------ - ----------------------------------------------- --------------------------------- -------- --
在 load-iframe 中，我们指定了 iframe 的名称为“my-iframe”。然后，我们在按钮的单击事件监听器中使用 post-message 包向 iframe.contentWindow 发送了一个消息。还记得吗？post-message 包使我们很容易地在不同窗口之间安全地传递信息。
希望你在学习本文时有所收获，能够在将来的工作中使用 load-iframe 来更轻松地处理 iframe 引入。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb444b5cbfe1ea0611251