域名:http://localhost:3000/test1.html 向http://localhost:3002/test2.html发送数据
test1.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe id="iframe" src="http://localhost:3002/test2.html" name="myIframe"></iframe>
<input type="text" id="msg">
<button id="btn">发送</button>
</body>
<script>
window.onload=function () {
var msgDom=document.getElementById('msg'),
btn=document.getElementById('btn');
btn.onclick=function () {
var msg=msgDom.value;
var iframeWin=myIframe.window;
iframeWin.postMessage(msg,'http://localhost:3002/test2.html')
//h5规范:可以发送JavaScript的任意基本类型或可复制的对象,但不是所有浏览器都兼容,有的
//浏览器只能处理字符串,所以需要用JSON.stringify()序列化
}
}
</script>
</html>
test2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
test2.html接受数据
</body>
<script>
window.onload = function() {
if(window.addEventListener){
window.addEventListener("message", handleMessage, false);
}
else{
window.attachEvent("onmessage", handleMessage);
}
function handleMessage(event) {
event = event || window.event;
if(event.origin === 'http://localhost:3000') {
console.log('接受数据',event.data);
}
}
}
</script>
</html>