开发中,可能需要弹出一个新的辅助页面(简洁窗口)来帮助用户输入,然后再把值带回到父窗口。如下所示:
当点击001时,可以把001的供货商显示在父窗口的input框中。
代码实现如下:
1).parent.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>parent window</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
</style>
<script type="text/javascript" src="./jquery-1.7.js"></script>
<script type="text/javascript">
$(function(){
$("#select").click(function(){
var name = "subwindow";
var option = "width=300px,height=160px,resizable=yes,scrollbars=yes,location=no,status=no,menubar=no ";
var url = "./sub.html?returnName=supplier";
subWindow = window.open(url, name, option);
subWindow.focus();
});
});
</script>
</head>
<body>
<br/>
供货商:<input type="text" name="supplier" id="supplier"/><input type="button" id="select" value="选择"/>
</body>
</html>
2).sub.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>sub window</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
</style>
<script type="text/javascript" src="./jquery-1.7.js"></script>
<script type="text/javascript">
$(function(){
$(".nolink").click(function (index, dom) {
var o = $(this);
var a=o.attr("para.a");
//window.opener.console.info(a);//获得父窗口的控制台打印,子窗口由于点完超链接后关闭看不到
window.opener.$("#supplier").val(a);
window.close();
});
});
</script>
</head>
<body>
<br/>
供货商:<br/>
<a href="#" class="nolink" para.a="a001供货商" >001</a><br/>
<a href="#" class="nolink" para.a="a002供货商" >002</a><br/>
<a href="#" class="nolink" para.a="a003供货商" >003</a><br/>
</body>
</html>
以上在IE和火狐浏览器中测试通过,但是在chrome中不行,还不知道如何修正,请大神帮忙。