最近遇到一个问题,在一个项目中需要输入企业的名称,以便到数据库中找到该企业以便进行相关操作,如果企业名称输入不规范,比如数据库中有多个名为家乐福的商场,包括蜀山区家乐福,包河区家乐福,而用户不能提供准确的信息来查找,因此需要将类似的项目列出来让用户选择,如使用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 >
<! 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 >
<! 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 >
< 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 >
< 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 >