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

ゞ浴缸里的玫瑰 2022-05-12 00:48 128阅读 0赞

**一 应用**

该实例允许用户打开一个页面来选择图书，当用户选择了合适的图书之后，再把用户选择的图书传回主页面。该应用是用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="#" οnclick="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'"
    					+ " οnclick='chooseItem(this);'/>";
    			}
    		};
    	</script>
    </head>
    <body>
    <table>
    	<tr>
    		<th>图书名</th>
    		<th>价格</th>
    		<th>作者</th>
    		<th>选择</th>
    	</tr>
    	<tbody id="bookTb"></tbody>
    </table>
    </body>
    </html>

**三 运行结果**

![862b22fa-645f-3aeb-8e01-b12f73466665.png][]

[862b22fa-645f-3aeb-8e01-b12f73466665.png]: /images/20220512/7a91b720048d4432a49945f0e8e4100d.png