JS弹出新页面后选择值返回

最新推荐文章于 2022-01-21 11:11:11 发布

weixin_34258838

最新推荐文章于 2022-01-21 11:11:11 发布

阅读量545

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/cwalet/blog/36895

版权

为什么80%的码农都做不了架构师？>>>

最近要做一个这样的小功能，弹出一个新窗口（固定大小）并从该新页面的select选择框中选择需要的类别，再返回到之前的父窗口页面的某个文本框中。

查询一些资料后，我选择的方法如下：

1.首先需要一个文本框（或其他）来接收值：

<textarea id="txtContent"></textarea>

此外在父窗口中添加一个超链接：

注意：一定要定义 var a 并接收这个返回值，虽然不会直接使用变量a，但如果没有定义返回值将会丢失。

2.在弹出的子窗口中的select标签中增加onchange事件：

<select id="selectContent" size="20" style="width: 618px" onchange="check()">
	 <c:forEach var="l" items="${requestScope.lms}">
		<option value="${l.content}" title="${l.content}">
			${l.content}
		</option>
	</c:forEach>
</select>

（在 option 标签中增加一个 title 属性可以显示出超出 select 标签宽度的内容，仅IE6不支持该属性）

其中check()函数如下：

function check() {
	if(confirm("确认选择这条做为回复吗？")) {
		var content = document.getElementById("selectContent").value;
                window.opener.document.getElementById("txtContent").value = content;
		window.close();
	}
}

window.opener 打开的ID为“txtContent”的元素即为父页面的文本框，而“selectContent”即为选择框的ID。

说明：实际使用中发现window.opener的方法支持IE系列、Opera 11.52，但不支持Chrome 14.0.835.187及Firefox 8.0。

具体差异请参考：http://w3help.org/zh-cn/causes/BX1053

问题：window.open()函数的部分参数也支持不好。在IE8中只能全屏打开，即使制定了窗口尺寸也是。在Chrome中指定了“scrollbar=no”却不被支持，页面总是有滚动条，消除的方法是：

html{overflow-x: hidden} body{overflow-x: hidden}

来自： http://4in1.blogbus.com/logs/20816619.html

EOF.通过这种方式就可以将子窗口的值赋给父窗口的某个变量。

参考：http://blog.csdn.net/xmwangtiger/article/details/4234054

http://topic.csdn.net/u/20070915/11/c00e203f-dd84-462d-b087-f18f0ce74fdb.html

window.open()函数的其他参数具体含义是：

引用：http://hi.baidu.com/oiunt/blog/item/4e1bafca909f7a80c9176806.html

sUrl:可选项。字符串(String)。指定要被加载的HTML文档的URL地址。假如无指定值，则about:blank的新窗口会被显示。
sName:可选项。字符串(String)。指定打开的窗口的名字。这个名字可以用于form或a对象的TARGET属性。此名字也可以使用下列通用名称:_media:IE6.0在浏览器左边的媒体面板内打开sUrl。
_blank:在新窗口中打开sUrl。
_parent:在当前框架的父框架内打开。假如当前框架无父框架，此参数值等同于_self。
_search:IE5.0在浏览器左边的搜索面板内打开sUrl。
_self:sUrl在当前窗口中打开，覆盖当前文档。
_top:在所有框架之外的最顶层窗口中打开sUrl。假如当前窗口无框架结构，此参数值等同于_self。
sFeatures:可选项。字符串(String)。指定窗口装饰样式。使用下面的值。多个之间用逗号隔开。只有当新的浏览器窗口被建立时，此参数的设置才会发生作用。channelmode={yes|no|1|0}指定是否将窗口显示为频道模式。默认值为no。
directories={yes|no|1|0}指定是否显示「链接」按钮。默认值为yes。
fullscreen={yes|no|1|0}指定是否以全屏方式显示窗口。默认值为no。要小心使用全屏模式，因为这种模式会隐藏浏览器窗口的标题栏和菜单。如果没有在页面内提供关闭窗口的功能，用户可以使用ALT+F4快捷键关闭窗口。
height=number设置窗口的高度。最小值为100。
left=number设置窗口左上角相对于桌面的横坐标。单位为像素(px)。
width=number设置窗口的宽度。最小值为100。
top=number设置窗口左上角相对于桌面的纵坐标。单位为像素(px)。
location={yes|no|1|0}设置是否显示浏览器窗口的地址栏。默认值为yes。
menubar={yes|no|1|0}设置是否显示浏览器窗口的菜单栏。默认值为yes。
resizable={yes|no|1|0}设置窗口是否允许被用户改变尺寸。默认值为yes。
scrollbars={yes|no|1|0}设置窗口是否可以具有滚动条。默认值为yes。
status={yes|no|1|0}设置是否显示浏览器窗口的状态栏。默认值为yes。
titlebar={yes|no|1|0}设置是否显示浏览器窗口的标题栏。除非调用程序是HTML应用程式(HTA)或被信任的对话框，否则此参数将被忽略。默认值为yes。toolbar={yes|no|1|0}设置是否显示浏览器窗口的工具条。默认值为yes。
bReplace:可选项。布尔值(Boolean)。false|true。false:新打开的文档覆盖历史列表里的当前文档。true:文新打开的文档被简单的添加到历史列表的最后。