iframe怎么传json

在网页开发中，使用iframe进行内容嵌入是一种常见的做法，有时候我们需要在不同的iframe之间传递数据，例如JSON对象，由于浏览器的同源策略限制，直接在iframe之间传递数据可能会受到一定的限制，我们可以通过一些技巧和方法来实现在iframe中传递JSON数据。

1、利用window.postMessage方法

window.postMessage方法允许在不同源的窗口之间传递消息，通过这个方法，我们可以在iframe和父窗口之间传递JSON数据，获取iframe的引用，然后使用postMessage方法发送数据。

// 获取iframe的引用
var iframe = document.getElementById("myIframe");
// 定义要发送的JSON数据
var jsonData = { key1: "value1", key2: "value2" };
// 将JSON数据转换为字符串
var jsonString = JSON.stringify(jsonData);
// 使用postMessage方法发送数据
iframe.contentWindow.postMessage(jsonString, "*");

在iframe中接收数据：

// 监听message事件
window.addEventListener("message", function(event) {
  // 确保消息来自正确的源
  if (event.origin !== "http://example.com") {
    return;
  }
  // 将接收到的字符串转换为JSON对象
  var receivedData = JSON.parse(event.data);
  // 处理接收到的数据
  console.log(receivedData);
});

2、利用window.name属性

window.name属性在所有同源窗口间共享，可以用来在iframe和父窗口之间传递数据，需要注意的是，window.name属性只能存储字符串，因此我们需要将JSON对象转换为字符串。

在父窗口中设置window.name属性：

// 定义要传递的JSON数据
var jsonData = { key1: "value1", key2: "value2" };
// 将JSON数据转换为字符串
var jsonString = JSON.stringify(jsonData);
// 设置window.name属性
iframe.contentWindow.name = jsonString;

在iframe中获取window.name属性：

// 获取window.name属性
var jsonString = window.name;
// 将接收到的字符串转换为JSON对象
var receivedData = JSON.parse(jsonString);
// 处理接收到的数据
console.log(receivedData);

3、利用localStorage

localStorage提供了一个简单的方式来在浏览器中存储键值对数据，我们可以利用localStorage在iframe和父窗口之间传递JSON数据。

在父窗口中设置localStorage：

// 定义要传递的JSON数据
var jsonData = { key1: "value1", key2: "value2" };
// 将JSON数据转换为字符串
var jsonString = JSON.stringify(jsonData);
// 存储数据到localStorage
localStorage.setItem("myData", jsonString);

在iframe中获取localStorage：

// 从localStorage获取数据
var jsonString = localStorage.getItem("myData");
// 将接收到的字符串转换为JSON对象
var receivedData = JSON.parse(jsonString);
// 处理接收到的数据
console.log(receivedData);

需要注意的是，localStorage仅适用于同源的iframe和父窗口，如果iframe和父窗口的源不同，这种方法将无法使用。

在iframe中传递JSON数据可以通过多种方法实现，包括window.postMessage、window.name属性和localStorage，开发者可以根据实际需求和场景选择合适的方法，要注意浏览器的同源策略限制，确保在传递数据时遵循相关规范。

谷歌浏览器

谷歌浏览器

谷歌浏览器