用js实现子窗口中向父窗口中添加内容

Javascript piniu 423浏览 0评论

在father.html 表单页面中, 点击“选择”打开一个新的窗口son.html,

在新的窗口son.html中,点击相应“城市名称”的后,将“城市名称”赋值给father.html表单中。

父页面文件 father.html 代码如下:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
     <div>
          请选择城市:
          <input id="city" name="city" type="text" value=""/>
          <input id="btn" name="btn" type="button" value="选择" />
     </div>

 </body>
</html>
<script type="text/javascript">
          window.onload = function(){
              var btnObj = document.getElementById("btn");
              btnObj.addEventListener('click',function(){
                  window.open("./son.html","_bank","left=500, top=100, width=400, height=300, resizable=no"); 
          });
     }

</script>

子页面 son.html 代码如下:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
          <div>
               <ul>
                    <li>北京</li>
                    <li>上海</li>
                    <li>成都</li>
                    <li>深圳</li>
               </ul>
          </div>

 </body>
</html>
<script type="text/javascript">
          var liObj = document.getElementsByTagName('li');
          for(var i=0; i<liObj.length; i++){
               liObj[i].onclick = function(){
                   var txtObj = this.firstChild.cloneNode();
                   //alert(txtObj.nodeValue);
                   window.opener.document.getElementById('city').value=txtObj.nodeValue;
                   window.close();
              }
          }

</script>

说明:

window的 opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。

当使用window.open()打开一个窗口,您可以使用此属性返回来自目标窗口源(父)窗口的详细信息。


发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • * 昵称:
  • * 邮箱: