简介
在前端开发过程中，常常需要在父窗口和 iframe 窗口之间传递数据和进行交互。而引入 iframe 会涉及到跨域问题，为此我们需要使用一个工具类 npm 包来帮助我们解决这个问题：iframe-script-loader。
本文将详细介绍 iframe-script-loader 的使用方法，包括 npm 包的安装、引用和使用及相关示例代码。
安装
iframe-script-loader 是一个 NPM 包，在使用之前需要先安装它。在命令行中运行以下命令：
npm install iframe-script-loader
安装完成后，可以在项目中进行使用。
引用
引用 iframe-script-loader 需要使用 require 或 import 语句。以下是引入方法的示例代码：
// 使用 require 引用
const IframeScriptLoader = require('iframe-script-loader');
// 使用 import 引用
import IframeScriptLoader from 'iframe-script-loader';使用方法
使用 iframe-script-loader 主要分为两步：在父窗口中将数据发送给 iframe 窗口，以及在 iframe 窗口中接收并处理数据。
发送数据
在父窗口中需要创建一个新的 iframe 元素，并使用 IframeScriptLoader 实例调用 sendMessage 方法来向 iframe 窗口发送数据。以下是示例代码：
-- -------------------- ---- -------
---- --- ---- ---
------
------- -----------------------
--------
-- -- ------ --
----- ------ - ------------------------------------
---------- - --------------------------
-- --- ------------------
----- ------ - --- -----------------------------------------
-- ----
-------------------- -------- ------ ------ ---
---------
-------在上面的代码中，我们首先创建了一个新的 iframe 元素，并通过其 src 属性指定了 iframe 要加载的页面 URL。然后我们实例化了 IframeScriptLoader，通过其构造函数参数传入了 iframe.contentWindow 来获取到 iframe 窗口的 window 对象。
接着，我们使用实例对象的 sendMessage 方法向 iframe 窗口发送数据。sendMessage 方法的参数是一个 Object，可以是任意数据类型。在上面的示例中，我们向 iframe 窗口发送了一个包含字符串 'Hello World' 的 message 对象。
接收数据
在 iframe 窗口中，也需要实例化 IframeScriptLoader，并调用其 onMessage 方法来接收数据。以下是示例代码：
-- -------------------- ---- -------
---- ------ -- ---- ---
------
--------
-- --- ------------------
----- ------ - --- ----------------------------------
-- ----
----------------------- -- -
------------------
---
---------
-------在上面的代码中，我们实例化了 IframeScriptLoader，并通过其构造函数参数传入了 window.parent，来获取到父窗口的 window 对象。
然后我们使用实例对象的 onMessage 方法来监听来自父窗口的消息。onMessage 方法的参数是一个回调函数，当有新的数据传输时，该回调函数会被调用，并接收到一个包含传输数据的 object 对象。
在上面的示例中，我们用 console.log 在控制台输出了接收到的数据。
示例代码
最后，我们给出一个完整的示例代码，用来演示如何在父窗口和 iframe 窗口之间进行数据传输和交互。
-- -------------------- ---- -------
---- --- ---- ---
------
------- -----------------------
--------
-- -- ------ --
----- ------ - ------------------------------------
---------- - --------------------------
-- --- ------------------
----- ------ - --- -----------------------------------------
-- ----
-------------------- -------- ------ ------ ---
---------
--------- -------------------- ---- -------
---- ------ -- ---- ---
------
---------- -------
---- -----------------------------
--------
-- --- ------------------
----- ------ - --- ----------------------------------
-- ----
----------------------- -- -
----- ---------------- - ---------------------------------------------
-------------------------- - -------------
-- ------
-------------------- -------- ------ ------- ---
---
---------
-------上面的代码演示了如何在父窗口和 iframe 窗口之间传输数据，以及如何在接收到数据后进行处理并回复数据。在此演示中，我们向 iframe 窗口发送了一个 message 对象，其中包含了字符串 'Hello World'。在 iframe 窗口中，我们接收到了这个 message 对象并将它显示在画面中，然后用 sendMessage 方法向父窗口发送了另一个 message 对象，其包含了字符串 'Hello Parent'。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79049