当一个网页包含一个内嵌的 iframe 元素时，在页面和 iframe 中共享数据可能会成为一个重要问题。特别是在前端开发中，我们经常需要脚本代码在主页面和 iframe 中共享相同的数据。
下面是几种方法可以实现在页面和 iframe 之间共享全局 JavaScript 变量：
1. 使用 window.parent
如果 iframe 嵌入到页面中，则可以使用 window.parent 引用其父级窗口。通过将变量附加到 parent 对象上，您可以将其作为父窗口的全局变量使用，并从 iframe 脚本中访问它们。
下面是一个简单的示例，展示了如何在父级窗口和 iframe 中设置和访问共享变量：
// 在父级窗口中设置全局变量
window.sharedData = {
message: "Hello world!"
};
// 在 iframe 中访问全局变量
console.log(window.parent.sharedData.message); // 输出 "Hello world!"在此示例中，我们将 sharedData 变量添加到 window 对象的父级窗口中。然后，我们可以使用 window.parent.sharedData 来在 iframe 中访问该变量。
2. 使用 window.postMessage()
另一种方法是使用 window.postMessage() API。该 API 可以安全地在两个不同的窗口之间传递消息。当然，这也包括在父窗口和 iframe 之间传递数据。
下面是一个示例，展示了如何使用 window.postMessage() 在页面和 iframe 中共享变量：
-- -------------------- ---- -------
-- ------------
----------------- - -
-------- ------ -------
--
-- ---- ------ ---
---------------------------------- --------------- -
-- -------- ------------
-- ------------- --- ----------------------- -
-------
-
-- --------
--- ---- - -----------------------
-- ------- ------------------------- ------
-- ---------- --- ---------------- -
-----------------------------------------
----- -------------
------ -----------------
--- -----
-
---
-- - ------ -------
---------------------------------------------------
----- ---------------
--- -----在此示例中，我们使用 window.postMessage() API 在 iframe 和主窗口之间通信。首先，我们在主窗口中设置了 sharedData 变量。然后，我们监听了来自 iframe 的消息，并通过 postMessage() 方法将共享变量返回到 iframe。
3. 使用 LocalStorage
LocalStorage 是 HTML5 提供的一种用于在浏览器中存储键值对的 API。可以使用 LocalStorage 来持久化地存储全局变量，并从不同的窗口访问它们。
下面是一个示例，展示了如何使用 LocalStorage 在页面和 iframe 中共享变量：
// 在父级窗口中设置全局变量
localStorage.setItem("sharedData", JSON.stringify({
message: "Hello world!"
}));
// 在 iframe 中访问全局变量
var sharedData = JSON.parse(localStorage.getItem("sharedData"));
console.log(sharedData.message); // 输出 "Hello world!"在此示例中，我们使用 localStorage API 将共享变量保存到本地存储中。然后，我们可以在不同的窗口中使用 localStorage 来获取共享变量。
总结
在本文中，我们介绍了三种在页面和 iframe 之间共享全局 JavaScript 变量的方法：使用 window.parent、window.postMessage() 和 LocalStorage。每种方法都有其各自的优缺点，具体取决于您的需求和应用场
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27978