跨文档发送JSON消息实现图书选择
程序员文章站
2024-01-12 20:06:58
...
一 应用
该实例允许用户打开一个页面来选择图书，当用户选择了合适的图书之后，再把用户选择的图书传回主页面。该应用是用JSON消息发送的。
二 代码
1、viewBook.html
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 选择图书 </title>
<script type="text/javascript">
var chooseBook = function()
{
// 打开一个新窗口
var targetWin = window.open('http://localhost/test1/1/target/chooseBook.html'
,'_blank','width=510,height=300');
// 等该窗口装载完成时，向该窗口发送消息
targetWin.onload = function ()
{
var data = [
{
name : '疯狂Java讲义',
price : 109,
author : 'yeeku'
},
{
name : '疯狂Android讲义',
price : 89,
author : 'yeeku'
},
{
name : '轻量级Java EE企业应用实战',
price : 99,
author : 'yeeku'
}
];
// 向http://localhost:8888/target发送消息
targetWin.postMessage(data
, "http://localhost/test1/1/target"); //①
}
}
// 通过onmessage监听器监听其他窗口发送回来的消息
window.onmessage = function(ev)
{
// 忽略来自其他域名的跨文档消息（只接受http://localhost:8888的消息）
if (ev.origin != "http://localhost")
{
return;
}
var show = document.getElementById("result");
// 显示消息
show.innerHTML = ("您选择的图书为：<br/>"
+ "书名：" + ev.data.name + "<br/>"
+ "价格：" + ev.data.price + "<br/>"
+ "作者：" + ev.data.author + "<br/>");
};
</script>
</head>
<body>
<a href="#" onclick="chooseBook();">选择图书</a>
<div id="result"></div>
</body>
</html>2、chooseBook.html
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 选择图书 </title>
<style type="text/css">
body>table {
width:480px;
border-collapse: collapse;
}
td,th {
border: 1px solid black;
}
</style>
<script type="text/javascript">
var srcWin , srcOrigin;
var chooseItem = function(td)
{
var currentRow = td.parentNode.parentNode;
srcWin.postMessage(
{
name: currentRow.cells[0].innerHTML ,
author: currentRow.cells[1].innerHTML ,
price: currentRow.cells[2].innerHTML
} , srcOrigin);
window.close();
};
window.onmessage = function(ev)
{
// 忽略来自其他域名的跨文档消息（只接受http://localhost的消息）
if (ev.origin != "http://localhost")
{
return;
}
srcWin = ev.source;
srcOrigin = ev.origin;
// 接收到其他文档发送过来的消息
var books = ev.data;
var bookTb = document.getElementById("bookTb");
for(var i = 0 ; i < books.length ; i++)
{
var row = bookTb.insertRow(i);
row.insertCell(0).innerHTML = books[i].name;
row.insertCell(1).innerHTML = books[i].price;
row.insertCell(2).innerHTML = books[i].author;
row.insertCell(3).innerHTML = "<input name='choose' type='radio'"
+ " onclick='chooseItem(this);'/>";
}
};
</script>
</head>
<body>
<table>
<tr>
<th>图书名</th>
<th>价格</th>
<th>作者</th>
<th>选择</th>
</tr>
<tbody id="bookTb"></tbody>
</table>
</body>
</html>三 运行结果