JS、HTML内嵌iframe第三方网页,如何通信?

时间:2024-01-23 20:56:31

在实际使用postMessage时,如果你不确定确切的父页面或子页面的源地址(即origin),可以采取以下策略:

  1. 允许任意源发送消息: 如果你希望iframe子页面能够向任何父页面发送消息,或者父页面接受来自任何域的iframe消息,可以在调用postMessage时将目标源设置为通配符 *
// 子页面向任意源发送
window.parent.postMessage('消息内容', '*');

// 父页面向任意源的iframe发送
iframe.contentWindow.postMessage('消息内容', '*');

注意:这样做虽然方便了跨域通信,但也增加了安全风险,因为它意味着你的页面将接收和处理来自任何源的消息。因此,在接收到消息后,务必验证消息来源和内容的安全性。

  1. 动态获取当前源: 在发送消息的一方,可以使用window.location.origin来获取当前页面的实际源地址,然后将其传递给postMessage函数:
// 获取当前页面的源,并用于发送消息
var currentOrigin = window.location.origin;
window.parent.postMessage('消息内容', currentOrigin);
  1. 安全通信模式: 在父页面监听message事件时,通常需要检查事件的.origin属性以确保消息来自于预期的源。如果你不知道确切的目标源,但知道应该有哪些合法的源,则可以在事件处理器中进行相应的判断:
window.addEventListener('message', function(event) {
  const expectedOrigins = ['https://parent-origin.com', 'https://another-trusted-origin.com'];
  
  if (expectedOrigins.includes(event.origin)) { // 检查是否是信任的源之一
    console.log('接收到的消息:', event.data);
    // 处理消息...
  } else {
    console.warn('接收到不明来源的消息,已被忽略');
  }
}, false);

通过以上方式,可以根据实际情况灵活处理不同源之间的postMessage通信问题。

要使用postMessage发送、接收消息即可。

JS、HTML内嵌iframe第三方网页,如何通信?_源地址