iframe 传json 代码示例

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

iframe 是 HTML 中的一个标签，用于在网页中嵌入另外一个网页。通过使用 iframe，我们可以在当前页面中显示来自不同源的内容，例如显示其他网站的页面或者将一个网页分割成多个部分。

要在 iframe 中传递 JSON 数据，我们可以通过以下步骤实现：

1. 我们需要创建一个包含 JSON 数据的 JavaScript 对象。

2. 然后，我们将该 JavaScript 对象转换为 JSON 字符串，以便在 iframe 中进行传递。

3. 接下来，在 iframe 中创建一个包含 JavaScript 代码的 HTML 页面，并将 JSON 字符串传递给该页面。

4. 在 iframe 中的 JavaScript 代码中，我们可以将接收到的 JSON 字符串转换回 JavaScript 对象，以便在 iframe 中使用。

下面是一个示例代码，演示了如何在 iframe 中传递 JSON 数据：


<!-- 父页面 -->
<!DOCTYPE html>
<html>
<head>
  <title>父页面</title>
</head>
<body>
  <h1>父页面</h1>
  <iframe src="child.html" id="myIframe"></iframe>
  <script>
    // 创建包含 JSON 数据的 JavaScript 对象
    var jsonData = {
      name: "John",
      age: 25,
      city: "New York"
    };
    // 将 JavaScript 对象转换为 JSON 字符串
    var jsonString = JSON.stringify(jsonData);
    // 在 iframe 中传递 JSON 字符串
    var iframe = document.getElementById("myIframe");
    iframe.onload = function() {
      iframe.contentWindow.postMessage(jsonString, "*");
    };
  </script>
</body>
</html>


<!-- 子页面（child.html） -->
<!DOCTYPE html>
<html>
<head>
  <title>子页面</title>
  <script>
    window.addEventListener("message", function(event) {
      // 接收到来自父页面的消息
      var jsonString = event.data;
      // 将 JSON 字符串转换为 JavaScript 对象
      var jsonData = JSON.parse(jsonString);
      // 在子页面中使用 JSON 数据
      console.log("Name: " + jsonData.name);
      console.log("Age: " + jsonData.age);
      console.log("City: " + jsonData.city);
    });
  </script>
</head>
<body>
  <h1>子页面</h1>
</body>
</html>

在上述示例中，父页面创建了一个包含 JSON 数据的 JavaScript 对象，并将其转换为 JSON 字符串。然后，通过使用 postMessage 方法，将 JSON 字符串传递给嵌入的 iframe 页面。在子页面中，通过监听 message 事件，接收到来自父页面的消息，并将 JSON 字符串转换为 JavaScript 对象。子页面可以使用该对象中的数据进行操作。

iframe 传json 代码示例

相关阅读