两个网页间传递数据

106 阅读1分钟

在一个页面和它生成的弹出窗口之间

1. window.name 简单

用于安全的备选,来提供跨域通信

2. window.postMessage

示例demo, 还适用页面和嵌入其中的iframe之间 发送端 基本语法

targetWindow.postMessage(message, targetOrigin, [transfer]);

targetWindow就是接收消息的窗口的引用。 获得该引用的方法包括:

   Window.open
   Window.opener
   HTMLIFrameElement.contentWindow   
   Window.parent
   Window.frames +索引值

targetOrigin 一定指定具体的 url(协议 + ip地址 + 端口),为了安全 代码示例

var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('send');
btn.addEventListener('click', function (e) {
    e.preventDefault();
    var val = document.getElementById('text').value;
    receiver.postMessage("Hello "+val+"!", "http://res.42du.cn");
});

接收端 event.origin !== "www.42du.cn" 判断信息来源,为了安全。会传消息也要指定targetOrigin

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
  if (event.origin !== "http://www.42du.cn")
    return;
    
    
    event.source.postMessage("hi there yourself!  the secret response " +
                           "is: rheeeeet!",
                           event.origin)

}