父子窗口交互
实例：
打开一个新窗口，用户在新窗口加载的页面中输入检索条件，单击确定按钮，检索条件将送回给父窗口，父窗口根据得到的条件进行检索并且更新页面的显示，同时关闭子窗口。
代码：
Code//1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1</title>
<style type="text/css">
* {margin:0}
body {text-align:center;min-width:760px}
div {padding:3px 3px 3px 3px}
#main {width:720px;margin:0 auto;text-align:left}
.product {width:100%;background-color:#ccc;margin-top:20px;}
.title {font-size: 24px;border-bottom: 1px dotted blue}
.description {height: 50px}
.footer {font-size: 12px;text-align:right}
</style>
<script type="text/javascript">
var win;
function search(){
win = window.open("2.html","win","height=100px,width=300px,left="
+ (screen.availWidth/2-150) + "top=" + (screen.availHeight/2-50));
}
function doSearch(keyword){
if(win)win.close();
var divResult = $("result");
divResult.innerHTML = "检索\"" + keyword + "\"的结果:";
divResult.style.display = "";
var list = ["product1","product2","product3","product4","product5"];
for (var i=0;i<list.length;i++){
$(list[i]).style.display = (Math.random()>0.5)?"none":"";
}
}
function $(id)
{return document.getElementById(id);}
</script>
</head>
<body>
<div id=main>
<button onclick="search()">检索</button>
<div id="result" style="display: none"></div>
<div id="product1" class="product">
<div class="title">产品1</div>
<div class="description">产品1描述。。。</div>
<div class="footer">产品1生产厂家</div>
</div>
<div id="product2" class="product">
<div class="title">产品2</div>
<div class="description">产品2描述。。。</div>
<div class="footer">产品2生产厂家</div>
</div>
<div id="product3" class="product">
<div class="title">产品3</div>
<div class="description">产品3描述。。。</div>
<div class="footer">产品3生产厂家</div>
</div>
<div id="product4" class="product">
<div class="title">产品4</div>
<div class="description">产品4描述。。。</div>
<div class="footer">产品4生产厂家</div>
</div>
<div id="product5" class="product">
<div class="title">产品5</div>
<div class="description">产品5描述。。。</div>
<div class="footer">产品5生产厂家</div>
</div>
</div>
</body>
</html>
Code//2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2</title>
<script type="text/javascript">
function doSearch(){
window.opener.doSearch(document.getElementById("keyword").value);
}
function keydown(event){
if (event.keyCode==13) doSearch();
}
</script>
</head>
<body>
<input type=text id=keyword onkeydown="keydown(event)">
<input type=button onclick=doSearch() value=检索>
</body>
</html>
浙公网安备 33010602011771号