iframe的跨域通信(代码示例)

  • Post author:
  • Post category:其他




在前端开发中,我们经常会使用iframe来嵌套其他网页或者同域的页面。但是,如果iframe中嵌套的页面和当前页面不属于同源,那么就无法直接进行通信。为了解决这个问题,我们可以使用以下几种方式来实现跨域通信:

  1. 使用postMessage方法在iframe中可以通过postMessage方法向父页面发送消息,而在父页面中可以通过监听message事件来接收消息。通过这种方式,我们就可以在不同源的页面之间进行通信。在iframe中:

window.parent.postMessage('message', 'http://parent-domain.com');


在父页面中:

 window.addEventListener('message', function(event) {
  if (event.origin === 'http://iframe-domain.com') {
    var message = event.data;
    // 处理消息
  }
});
  1. 使用location.hash方式在iframe中可以通过修改location.hash来向父页面传递数据,而在父页面中可以通过监听hashchange事件来获取到这个值。在iframe中:

javascriptCopy codewindow.parent.location.hash = 'message';


在父页面中:

javascriptCopy codewindow.addEventListener('hashchange', function() {
  var hash = window.location.hash;
  // 处理消息
});
  1. 使用window.name方式在iframe中可以通过修改window.name来向父页面传递数据,而在父页面中可以通过访问iframe的contentWindow.name来获取到这个值。在iframe中:

javascriptCopy codewindow.name = 'message';


在父页面中:

javascriptCopy codevar iframe = document.getElementById('iframe-id');
var message = iframe.contentWindow.name;
// 处理消息
  1. 使用window.postMessage + window.addEventListener(“message”, handler, false)方法这种方式类似于第一种方法,只是在父页面中需要使用一个事件处理函数来接收消息。在iframe中:

window.parent.postMessage('message', 'http://parent-domain.com');


在父页面中:

javascriptCopy codewindow.addEventListener('message', function(event) {
  if (event.origin === 'http://iframe-domain.com') {
    var message = event.data;
    // 处理消息
  }
}, false);


无论使用哪种方式,都需要注意一些安全问题,比如验证消息的来源和内容,避免跨站脚本攻击等。



版权声明:本文为jingdianjiuchan原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。