一 应用
该实例允许用户打开一个页面来选择图书，当用户选择了合适的图书之后，再把用户选择的图书传回主页面。该应用是用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>
三 运行结果
相关推荐
Opis JSON Schema是标准（草案2020-12，draft-2019-09，draft-07和draft-06）PHP实现，它将帮助您验证各种JSON文档，无论它们是配置文件或一组发送到RESTful API端点的数据。 图书馆的主要特点： 支持所有草稿中的...
@eropple/nestjs-openapi3是一个图书馆产生从您的API规范文档。 与相比，它试图与您的应用程序流更加集成，并推动您构建干净，分隔良好的API。 发行历史 0.4.4 添加了OAS.propPrefabs ，其中包括一些有用的预设，...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括...
LemonSMS 这个Java库可以让开发者在应用程序中集成使用GSM调制解调器或兼容电话来发送SMS消息。 远程桌面 Java Remote Desktop.tar Java Remote Desktop 是一个Java 的远程桌面软件，支持很多特性例如文件传输、...
LemonSMS 这个Java库可以让开发者在应用程序中集成使用GSM调制解调器或兼容电话来发送SMS消息。 远程桌面 Java Remote Desktop.tar Java Remote Desktop 是一个Java 的远程桌面软件，支持很多特性例如文件传输、...
1.1 跨浏览器、跨语言 55 1.2 节点的概念 56 1.3 节点的属性 56 1.4 节点方法 58 1.5 API 设计问题 63 1.6 通用节点类型 63 1.7 文档节点 64 1.8 元素节点 64 1.9 属性节点 66 1.10 文本节点 67 1.11 什么...
简洁（ compact）：可以通过URL,POST参数或者在 Http header发送，因为数据量小，传输速度也很快自包含（Sel|f- contained）负载中包含了所有用户所需要的信息，避免了多次查询数据库，此文档为实战
该数据用于呈现前端HTML，然后发送JSON选择以增强前端的地图和导航功能。 呈现HTML有两种版本：一种用于The Lens，另一种用于上的iframe中。 最后，所有照片和前端代码均被上载到Amazon S3，并在该页面上提供服务...
发送消息，同时对文本进行少量修改，发送end-of-messages消息，最后关闭连接。 Tcp服务端与客户端的JAVA实例源代码 2个目标文件 摘要:Java源码,文件操作,TCP,服务器 Tcp服务端与客户端的JAVA实例源代码，一个简单...
发送消息，同时对文本进行少量修改，发送end-of-messages消息，最后关闭连接。 Tcp服务端与客户端的JAVA实例源代码 2个目标文件 摘要:Java源码,文件操作,TCP,服务器 Tcp服务端与客户端的JAVA实例源代码，一个简单...
参考提取器 是一个免费的在线工具，用于从 Microsoft Word .docx 文档中提取和引用。 它仅适用于已通过 Zotero 或 Mendeley 文字处理器插件插入... 在您现有的 Zotero 图书馆中选择原始被引文献[仅适用于 Zotero] 。 在
LemonSMS 这个Java库可以让开发者在应用程序中集成使用GSM调制解调器或兼容电话来发送SMS消息。 远程桌面 Java Remote Desktop.tar Java Remote Desktop 是一个Java 的远程桌面软件，支持很多特性例如文件传输、...
LemonSMS 这个Java库可以让开发者在应用程序中集成使用GSM调制解调器或兼容电话来发送SMS消息。 远程桌面 Java Remote Desktop.tar Java Remote Desktop 是一个Java 的远程桌面软件，支持很多特性例如文件传输、...
LemonSMS 这个Java库可以让开发者在应用程序中集成使用GSM调制解调器或兼容电话来发送SMS消息。 远程桌面 Java Remote Desktop.tar Java Remote Desktop 是一个Java 的远程桌面软件，支持很多特性例如文件传输、...
LemonSMS 这个Java库可以让开发者在应用程序中集成使用GSM调制解调器或兼容电话来发送SMS消息。 远程桌面 Java Remote Desktop.tar Java Remote Desktop 是一个Java 的远程桌面软件，支持很多特性例如文件传输、...
LemonSMS 这个Java库可以让开发者在应用程序中集成使用GSM调制解调器或兼容电话来发送SMS消息。 远程桌面 Java Remote Desktop.tar Java Remote Desktop 是一个Java 的远程桌面软件，支持很多特性例如文件传输、...
LemonSMS 这个Java库可以让开发者在应用程序中集成使用GSM调制解调器或兼容电话来发送SMS消息。 远程桌面 Java Remote Desktop.tar Java Remote Desktop 是一个Java 的远程桌面软件，支持很多特性例如文件传输、...
LemonSMS 这个Java库可以让开发者在应用程序中集成使用GSM调制解调器或兼容电话来发送SMS消息。 远程桌面 Java Remote Desktop.tar Java Remote Desktop 是一个Java 的远程桌面软件，支持很多特性例如文件传输、...
LemonSMS 这个Java库可以让开发者在应用程序中集成使用GSM调制解调器或兼容电话来发送SMS消息。 远程桌面 Java Remote Desktop.tar Java Remote Desktop 是一个Java 的远程桌面软件，支持很多特性例如文件传输、...