html 同一页面两iframe互传值,如何在不同iframe之间传值

在，html5中可以，通过iframe的postMessage跨域传递参数和信息。

如下：

先是主页面HTML代码

postMessage (跨域)

给iframe发一个信息：

目标iframe传来的信息：

暂无信息

postMessage (跨域)

给iframe发一个信息：

目标iframe传来的信息：

暂无信息

然后是iframe的HTML代码

给父窗口发个信息：

暂无信息。

给父窗口发个信息：

暂无信息。

然后是主页面中的JS代码

varwin = document.getElementById("iframe").contentWindow;

document.querySelector('form').οnsubmit=function(e){

win.postMessage(document.getElementById("message").value,"*");

if(e.preventDefault){

e.preventDefault();

}

e.returnValue =false;

}

var win = document.getElementById("iframe").contentWindow;

document.querySelector('form').οnsubmit=function(e){

win.postMessage(document.getElementById("message").value,"*");

if (e.preventDefault){

e.preventDefault();

}

e.returnValue = false;

}

关键代码就一句：win.postMessage(document.getElementById("message").value,"*");

postMessage是通信对象的一个方法，所以向iframe通信，就是iframe对象调用postMessage方法。postMessage有两个参数，缺一不可。第一个参数是要传递的数据，第二个参数是允许通信的域，“*”代表不对访问的域进行判断，可理解为允许所有域的通信。

然后是iframe中的JS代码

varparentwin = window.parent;

window.onmessage=function(e){

document.getElementById("test")。innerHTML = e.origin +"say:"+ e.data;

parentwin.postMessage('HI!你给我发了"'+e.data+'"。',"*");

};

var parentwin = window.parent;

window.onmessage=function(e){

document.getElementById("test")。innerHTML = e.origin + "say:" + e.data;

parentwin.postMessage('HI!你给我发了"'+e.data+'"。',"*");

};

注：e.data包含传送过来的数据，e.origin指代源域