您的位置：首页 > Web前端 > HTML5

HTML5 跨域信息交互技术之 postMessage

2012-05-16 17:29 344 查看

转自：http://blog.chinaunix.net/uid-14356162-id-3111324.html

文件内容如下

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>跨站通信当前域 http://www.yuetong.com</title>
<script type="text/javascript">

function sendMsg(){

if(typeof window.postMessage == undefined){

//

alert("对不起您的浏览器不支持 postMessage 特性");

return false;

}

var msg = document.getElementById("message").value;

document.getElementsByTagName("iframe")[0].contentWindow.postMessage(msg,"http://my.bbs.com");

}

var originWhiteList = ["http://my.bbs.com"];

function checkWhiteList(origin){

for(var i=0; i< originWhiteList.length; i++){

if(origin == originWhiteList[i]){

return true;

}

}

return false;

}

/** 接受消息 */

function messageHandler(e){

if(checkWhiteList(e.origin)){

processMessage(e.data);

}else{

// ignore message

}

}

function processMessage(d){

alert(d);

}

window.addEventListener("message", messageHandler, true);

</script>

</head>

<body>

<h1>您好，我这里是http://www.yuetong.com/</h1>

<input type="text" name="message" id="message" value=""/>

<input type="button" name="handler" value="发生消息" onclick="sendMsg()"/>

<br/>

<iframe name="msg" src="http://my.bbs.com/comm_client.html" width="400" height="400"/>

<div></div>

</body>

</html>

在 http://my.bbs.com/ 域下新建 comm_client.html, 地址为http://my.bbs.com/comm_main.html，文件内容如下

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>跨站通信当前域 http://my.bbs.com</title>
<script type="text/javascript">

var originWhiteList = ["http://www.yuetong.com"];

function checkWhiteList(origin){

for(var i=0; i< originWhiteList.length; i++){

if(origin == originWhiteList[i]){

return true;

}

}

return false;

}

function messageHandler(e){

if(checkWhiteList(e.origin)){

processMessage(e.data);

}else{

// ignore message

}

}

function processMessage(d){

var ta = document.getElementsByTagName("textarea")[0].value;

ta += d + "\n";

document.getElementsByTagName("textarea")[0].value = ta;

}

function sendMsg(){

var msg = document.getElementById("message").value;

window.top.postMessage(msg,"http://www.yuetong.com");

}

window.addEventListener("message",messageHandler,true);

</script>

</head>

<body>

<h1>您好，我这里是 http://my.bbs.com/</h1>
<input type="text" name="message" id="message" value=""/>

<input type="button" name="handler" value="发生消息" onclick="sendMsg()"/>

<textarea name="msg" rows="15" cols="40"></textarea>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航