跨文档发送JSON消息实现图书选择

程序员文章站 2022-03-26 21:48: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>

三运行结果