js 将变量从 iframe 传递到父窗口

📌 相关文章

📜 js 将变量从 iframe 传递到父窗口 - Javascript (1)

📅 最后修改于: 2023-12-03 15:02:23.758000 🧑 作者: Mango

在 Web 开发中，有时候需要在嵌套的 iframe 中进行数据交互，比如将 iframe 中的某个变量或值传递到上层的父窗口中，这时候就需要使用 JavaScript 来实现。

1. 在 iframe 中获取变量

首先，在 iframe 中获取需要传递到父窗口的变量或值。我们可以使用 window.parent 来获取父窗口的对象，然后调用它的函数或设置它的属性来实现数据传递。

// 假设我们要传递的变量名为 variable
const variable = 'hello world';
// 通过 window.parent 从 iframe 获取父窗口对象
const parentWindow = window.parent;
// 调用父窗口的函数来传递变量
parentWindow.receiveDataFromIframe(variable);

2. 在父窗口中接收变量

在父窗口中，我们需要定义一个函数来接收从 iframe 中传递过来的变量。这个函数必须在 iframe 中调用时已经定义，否则会报错。

// 定义用来接收 iframe 传递的变量的函数
function receiveDataFromIframe(variable) {
  console.log('Received variable from iframe:', variable);
}

3. 完整示例

完整的示例代码如下，它演示了如何在 iframe 和父窗口中进行数据交互。

<!-- 父窗口 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Parent Window</title>
    <script>
      function receiveDataFromIframe(variable) {
        console.log('Received variable from iframe:', variable);
      }
    </script>
  </head>
  <body>
    <iframe src="iframe.html"></iframe>
  </body>
</html>

<!-- iframe -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>IFrame</title>
    <script>
      const variable = 'hello world';
      const parentWindow = window.parent;
      parentWindow.receiveDataFromIframe(variable);
    </script>
  </head>
  <body>
  </body>
</html>

总结

本文介绍了如何使用 JavaScript 在 iframe 和父窗口之间进行数据交互。通过调用父窗口的函数或设置它的属性，我们可以方便地将 iframe 中的变量传递到父窗口中。