javascript进行页面间传值（父调用子）

转自 http://blog.csdn.net/roden/archive/2007/12/09/1925830.aspx

 

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