温馨提示×

iframe子页面怎么向父页面传值

小亿
281
2024-01-19 18:17:27
栏目: 编程语言

要将值从iframe子页面传递给父页面,可以使用父页面的window对象的属性和方法。

  1. 在子页面中,可以使用window.parent来访问父页面的window对象。

  2. 如果要将值传递给父页面,可以使用window.parent.postMessage()方法。这个方法允许你向父页面发送一个消息,并传递一个数据参数。

在子页面中,可以使用以下代码将值传递给父页面:

// 子页面
var value = "这是要传递的值";
window.parent.postMessage(value, "*");

在父页面中,可以使用window.addEventListener()来监听来自子页面的消息,并获取传递的值:

// 父页面
window.addEventListener('message', function(event) {
  // event.data就是传递的值
  console.log("接收到子页面传递的值:" + event.data);
});

需要注意的是,window.postMessage()方法的第二个参数是目标窗口的源(origin),通常可以使用通配符"*"表示允许从任意源接收消息。如果你只希望接收特定源的消息,可以将这个参数设置为相应的源。

另外,要确保子页面和父页面在同一个域名下,否则跨域访问会受到限制。

0