最近遇到一个问题,在一个项目中需要输入企业的名称,以便到数据库中找到该企业以便进行相关操作,如果企业名称输入不规范,比如数据库中有多个名为家乐福的商场,包括蜀山区家乐福,包河区家乐福,而用户不能提供准确的信息来查找,因此需要将类似的项目列出来让用户选择,如使用DropDownList下拉列表来实现,数据超过20则无法继续,而在当前页查询又会造成页面不美观,所以需要到另一个页面中查询,查询好后返回到该页面.这就涉及到两个页面间传值的问题,经过查找资料,发现有两种javascript的方法可以解决这个问题.
方法一:
新建两个html文件分别命名为parent.htm和child.htm,下面将在parent.htm中打开child并设置parent中的值
parent.htm
<!
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"
>
<
body
>
<
input
id
="hidden_Input"
type
="text"
/>
<
a
href
="child.htm"
target
="_blank"
>
Popup Child.htm
</
a
>
</
body
>
</
html
>
child.htm
<!
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
>
<
script
type
="text/javascript"
>
...
function testme() ... { var parent = window.parent.opener; var hiddenInput = parent.document.getElementById( ' hidden_Input ' ); if (hiddenInput) ... { hiddenInput.value = ' show me the money, hahaha ' ; alert( ' close this window and see what happens on parent.htm~ ' ); window.close(); } }
</
script
>
<
title
></
title
>
</
head
>
<
body
>
<
button
onclick
="testme();"
>
点击这里设置parent.htm中的值
</
button
>
</
body
>
</
html
>
方法二:同样新建两个html文件parent.htm和child.
parent.htm
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>
parent
</
title
>
<
script
type
="text/javascript"
>
...
function inputtext(value) ... { document.getElementById( " tt " ).value = value; document.getElementById( " tt1 " ).focus(); }
</
script
>
</
head
>
<
body
>
点击输入框设置值
<
input
id
="tt"
type
="text"
onfocus
="javascript:window.open('child.htm','_blank','scrollbars=yes,status=no,top=20,left=20,width=450,height=211');"
/>
<
input
id
="tt1"
type
="text"
/>
</
body
>
</
html
>
child.htm
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>
child
</
title
>
<
script
language
="javascript"
type
="text/javascript"
>
...
<!-- function Button1_onclick() ... { var value = document.getElementById( " tt " ).value; parent.opener.inputtext(value); window.close(); } // -->
</
script
>
</
head
>
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
>
<
input
id
="tt"
type
="text"
/><
input
id
="Button1"
type
="button"
value
="button"
language
="javascript"
onclick
="return Button1_onclick()"
/>
</
div
>
</
form
>
</
body
>
</
html
>
在parent.htm中点击第一个input控件就会弹出child.htm输入完成后自动关闭页面给parent中的input控件赋值,并将焦点移到下一个控件