浏览器子窗口往父窗口传值遇到的window.opener is null 的问题

在做项目的时候遇到这样一个需求。

客户使用系统进行短信发送，可以通过选择数据库中的名片来添加收信人到一个列表框。我的想法是点击“选择名片”按钮，打开一个子窗口，子窗口为一个框架网页。分为左右两个框。左边显示分组，右边显示某个分组下的名片信息。当勾选某条名片信息前的复选框时，将此名片的电话号码和姓名传到父窗口的收信人列表中。思路就是这样，但是却遇到了问题。

点击选择名片就会出现一个子窗口，代码如下：

window.open('frame.do?flag=selectCards','child','width=600,height=300,left=200,top=200,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');

上面代码的作用是打开一个属于现窗口的子窗口。宽为600，高为300.left和top是新窗口的定位。后面几个参数的作用依次是 是否需要工具条、是否需要菜单栏、是否需要滚动条、大小是否可变、是否显示地址栏、是否显示状态栏。子窗口分为框架网页，左右结构。代码如下：

<frameset cols="150,*" frameborder="no" border="0" framespacing="0">
  <frame src="frame.do?flag=selectCards_left" name="selectCards_left" noresize="noresize" id="selectCards_left" />
  <frame src="cardManage/display.do?action=displayGroupsForSelectCards" name="selectCards_right" id="selectCards_right" />
</frameset>

左边为名片的分组列表，右边为当前选中分组下的名片信息。选中名片信息前的复选框，子窗口会将该名片的电话号码和姓名传到父窗口中的收信人列表框中去。代码如下：

$('input[name="cardCheckBox"]').click(function(){
	if(!!$(this).attr("checked")) {
		var checkedRow = $(this).parent().parent();
		var name = checkedRow.children("td").get(1).innerHTML;
		var phoneNum = checkedRow.children("td").get(2).innerHTML;
		window.opener.parent.frames['smsManage_right'].$('#phoneNumbers').append("<option value='"+phoneNum+"'>"+name+","+phoneNum+"</option>");
	}
});

笔者以为大功告成。一运行却发现不能成功传统。于是打开firebug查看控制台信息发现报错信息为：window.opener is null。我在网上搜索这个错误，却没有搜索到。貌似大家都没出过这样的错。找了半天也没找到错误所在。

最后还是这段代码提醒了我。

window.opener.parent.frames['smsManage_right'].$('#phoneNumbers').append("<option value='"+phoneNum+"'>"+name+","+phoneNum+"</option>");

因为父窗口也是个框架网页。所有在往回传值的时候需要先拿到parent 再去找包含收件人列表框的那个框架，最后才能真正的去拿到列表框。

于是推测，子窗口中的名片信息列表页包含在一个框架中，框架中是没有window.opener的。因为这个window.opener应该是属于子窗口的，也就是框架的parent。所有修改上述代码如下：

window.parent.opener.parent.frames['smsManage_right'].$('#phoneNumbers').append("<option value='"+phoneNum+"'>"+name+","+phoneNum+"</option>");

重新运行，传值成功！