跨文档发送JSON消息实现图书选择
程序员文章站
2022-07-08 07:59:20
...
一 应用
该实例允许用户打开一个页面来选择图书,当用户选择了合适的图书之后,再把用户选择的图书传回主页面。该应用是用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>
三 运行结果
上一篇: 使用jQuery制作级联下拉列表框
下一篇: 与Web Worker线程交换数据应用