html中，子窗口修改父窗口元素

来源：互联网发布：淘宝怎么卖东西给别人编辑：程序博客网时间：2024/05/22 13:37

开发中，可能需要弹出一个新的辅助页面（简洁窗口）来帮助用户输入，然后再把值带回到父窗口。如下所示：

当点击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中不行，还不知道如何修正，请大神帮忙。