window.open()与window.opener 的用法

刘海

2023-12-01

window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 


基本语法： 

window.open(pageURL,name,parameters) 
其中： 
pageURL 为子窗口路径 
name 为子窗口句柄 
parameters 为窗口参数(各参数用逗号分隔) 


示例： 


<SCRIPT> 
<!-- 
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,

menubar=no,scrollbars=no, resizable=no,location=no, status=no') 
//写成一行 
--> 
</SCRIPT>

脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0象素，屏左0象素，

无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏。 

上例中涉及的为常用的几个参数，除此以外还有很多其他参数，如下所示： 

各项参数 

其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。 

参数 | 取值范围 | 说明 

alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 
depended | yes/no | 是否和父窗口同时关闭 
directories | yes/no | Nav2和3的目录栏是否可见 
height | pixel value | 窗口高度 
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键 
innerHeight | pixel value | 窗口中文档的像素高度 
innerWidth | pixel value | 窗口中文档的像素宽度 
location | yes/no | 位置栏是否可见 
menubar | yes/no | 菜单栏是否可见 
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度 
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度 
resizable | yes/no | 窗口大小是否可调整 
screenX | pixel value | 窗口距屏幕左边界的像素长度 
screenY | pixel value | 窗口距屏幕上边界的像素长度 
scrollbars | yes/no | 窗口是否可有滚动栏 
titlebar | yes/no | 窗口题目栏是否可见 
toolbar | yes/no | 窗口工具栏是否可见 
Width | pixel value | 窗口的像素宽度 
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上 


用函数控制弹出窗口 

下面是一个完整的代码。 

<html> 
 <head> 
  <script LANGUAGE="JavaScript"> 
   function openwin() { 
    window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no,

menubar=no, scrollbars=no, resizable=no, location=no, status=no") //写成一行
   } 
  </script> 
 </head> 
 <body οnlοad="openwin()"> 
  任意的页面内容... 
 </body> 
</html>

这里定义了一个函数openwin(),函数内容就是打开一个窗口。怎么调用呢？ 

方法一： 

<body οnlοad="openwin()">
浏览器读页面时弹出窗口； 

方法二： 

<body οnunlοad="openwin()">
浏览器离开页面时弹出窗口； 

方法三： 
用一个连接调用： 

<a href="#" οnclick="openwin()">打开一个窗口</a>
注意：使用的“#”是虚连接。 

方法四： 
用一个按钮调用： 

<input type="button" οnclick="openwin()" value="打开窗口"> 

如何实现在不使用window.showModalDialog 的情况下用 window.open方式 向父窗口返回值。 

例如： 页面AAA.htm 用 window.open方式弹出页面 BBB.htm 。 
在页面BBB.htm上选择一个值，确定关闭窗口后将选择的这个值返回到父窗口AAA.htm。 
AAA.htm得到返回的值后，给本页面上的文本框赋值。 


BBB.htm页面中加入下面代码： 

 window.opener.document.getElementById("theTextAreaId").value =

document.getElemnetById("theSelectId").value ; 



window.opener 的用法 

window.opener 返回的是创建当前窗口的那个父窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm，

然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中，就可以写为： 


window.opener.document.getElementById("name").value = "输入的数据";

对于javascript中的window.opener没有很好的理解。 
为什么框架中不能使用，弹出窗口的父窗口不能在框架里面的某个页面呢？那怎样通过弹出窗口操作框架

中的父窗口呢？ 

opener.parent.frames['frameName'].document.all.input1.value

即opener这个对象为前一个窗口，可以使用window.opener.document...调用document的相关方法，

例如下面的例子，插入一些table行到前一个窗口： 

function taletoTb(itemStr) {   
        newRow = opener.document.all.itemTb.insertRow(opener.document.all.itemTb.rows.length);   
        rowCnt = opener.document.all.itemTb.rows.length;   
        newCell = newRow.insertCell();   
        newCell.insertAdjacentHTML('BeforeEnd','<div align="center">'+itemCode+'</div>');   
        newCell = newRow.insertCell();   
        newCell.insertAdjacentHTML('BeforeEnd','<div align="center">'+itemName+'</div>');   
        newCell = newRow.insertCell();   
        newCell.insertAdjacentHTML('BeforeEnd','<div align="center">

<img src="../../../images/delete2.gif" width="12" height="12" onClick="userRightDel(this);">

<input type="hidden" name="itembox" value='+itemCode+'></div>');   
     }  11:56 浏览 (159) 评论 (0) 分类: JavaScript 2008-02-27
缩略显示confirm用法和例子
一般用于弹出对话框（确定／否） 
确定：就执行其嵌套的内容；否：则反之 


<script language="javascript">   
//验证时间格式  YYYY-MM-DD/YYYY,MM,DD   
function isDate(date){   
    var regu = "^[0-9]{4}-([0-1]?)[0-9]{1}-([0-3]?)[0-9]{1}$";   
    var re   = new RegExp(regu);   
    if (date.search(re) != -1)   
        return true;   
    else  
        return false;   
}    
function sureButton(){   
   if(!confirm('真的要删除吗？删除后将无法恢复！')){   
       return;   
   }   
   //验证时间格式  YYYY-MM-DD   
  
       var startDate=document.getElementById("startDate").value;   
       var endDate=document.getElementById("endDate").value;    
       if(!isDate(startDate)){   
                   
             alert(startDate+"请输入正确的开始日期格式!如:(YYYY-MM-DD)2008-01-01");   
             return document.getElementById("startDate").focus();   
       }   
       if(!isDate(endDate)){   
             alert("请输入正确的结束日期格式!如:(YYYY-MM-DD)2008-01-01");   
             return document.getElementById("endDate").focus();   
       }   
         if(startDate==""){   
    alert("请输入开始日期");   
    return document.getElementById("startDate").focus();   
   }   
   if(endDate==""){   
    alert("请输入结束日期");   
    return document.getElementById("endDate").focus();   
   }    
   startDate=startDate.replace(new RegExp('-', 'g'),'/');   
   alert(startDate);   
   endDate=endDate.replace(new RegExp('-', 'g'),'/');   
   var startTime=new Date(startDate).getTime();   
   alert(new Date(startDate).getTime());   
   var endTime=new Date(endDate).getTime();   
   if((endTime-startTime)<0){   
    alert("结束日期必须大于开始日期");   
        return document.getElementById("endDate").focus();   
   }      
      
      
}   
</script>  


<html>    
<head>   
<meta http-equiv="Content-Language" content="zh-cn">   
<meta name="generator" content="Bluefish 1.0.7">   
<meta name="ProgId" content="FrontPage.Editor.Document">   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
<title></title>   
<style type="text/css">   
  table{color: #000000; font-family: 宋体; font-size: 12px; height:12 }   
  t1{color:#008000;align:center}   
</style>   
</head>   
  
<body topmargin="0" leftmargin="0">   
  
<div align="left">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"

bordercolor="#111111" width="461" height="8" id="AutoNumber1"

background="images/kabg.gif">   
    
    <tr>   
      <td  colspan="3">   
      <table cellpadding="0" cellspacing="0" style="border-collapse: collapse"

bordercolor="#111111" width="100%" height="17">   
          <tr>   
       <td width="19%" height="25" align="center" style="border:1px solid #000080;">

<font color="#008000">开始日期</font></td>   
       <td width="31%" style="border:1px solid #000080;">    
              <input name="startDate" type="text" id="startDate" size="15"></td>   
       <td width="22%" align="center" style="border:1px solid #000080;">

<font color="#008000">结束日期</font></td>   
       <td width="28%" style="border:1px solid #000080;">    
              <input name="endDate" type="text" id="endDate" size="15"></td>   
       </tr>   
       </table>   
       </td>   
    </tr>   
  
    <tr>   
      <td height="28" align="center" style="border:1px solid #000080; " colspan="3">   
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"

bordercolor="#111111" width="100%" id="AutoNumber3" height="17">   
        <tr>   
          <td width="14%" align="center" height="25">   
      <font color="#008000">当前状态</font></td>   
          <td width="18%" align="center" height="25">   
      <select size="1" name="display">   
      <option value="0">无效</option>   
      <option value="1">等待</option>   
      <option value="2" selected>显示中</option>   
      </select></td>   
          <td width="15%" align="center" height="25" style="border-left: 1px solid #000080;

border-right-width: 1; border-top-width: 1; border-bottom-width: 1">   
          <font color="#008000">Logo行宽</font></td>   
          <td width="10%" align="center" height="25">   
      <select size="1" name="colValue">   
      <option>1</option>   
      <option>2</option>   
      <option>3</option>   
      <option>4</option>   
      <option>5</option>   
      <option>6</option>   
      </select></td>   
       <td width="12%" align="center" style="border-left: 1px solid #000080;

border-right-width: 1; border-top-width: 1; border-bottom-width: 1">

<font color="#008000">显示顺序</font></td>   
       <td width="5%" >    
              <input name="displayOrder" type="text" id="displayOrder" size="3" value="1">   
     </td>   
          <td width="43%" align="center" height="25" style="border-left-style: solid;

border-left-width: 1; border-right-width: 1; border-top-width: 1;

border-bottom-width: 1"><input οnclick="cancelButton()" type="reset" value="关闭"

name="B2"

style="border-style: outset; border-width: 1; color:#0000FF">    
      <input οnclick="sureButton()" type="submit" value="确定" name="B1"

style="border-style: outset; border-width: 1; color:#0000FF"></td>   
        </tr>   
      </table>   
      </td>   
    </tr>   
    <tr>   
      <td height="20" colspan="3" align="center" style="border:1px solid #000080; ">   
      <marquee behavior="slide" style="color: #808080">::日期格式为年-月-日,直接填入图片和点击路径

全名时应仔细查对是否正确::</marquee></td>   
    </tr>   
  </table>   
</div>   
  
</body>   
  
</html>

可以批量删除表格记录行，通过checkbox选择删除的行；可以批量增加记录行，通过输入框指定行数。 


<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift-js">
    <title>The page of append rows to Table</title>


 <script language="JavaScript">
  // 新增行
  function addRow(){
   var textNum = document.getElementById("rownum");
   // 得到新增行记录的行数
   var index = textNum.value;
   if(!checknum(index)){
    alert("You can only input number in the TEXT!");
    textNum.focus(); 
    textNum.select();
   }
   for(var i = 0; i < index; i++){
    // 得到表格对象
    var tableObj = document.getElementById("mainTb");
    // 得到tbody对象
    var tableBodyObj = document.getElementById("mainBody");
    var newRowObj = document.createElement("tr");
    var newCheckBox = document.createElement("td");
    var newtext1 = document.createElement("td");
    var newtext2 = document.createElement("td");
    var newtext3 = document.createElement("td");
    newCheckBox.innerHTML = '<center><input type="Checkbox" name="checkbox"

onclick = "checkBoxSel()"></center>';
    newtext1.innerHTML = '<input type="text" name="newCarName" size="9">';
    newtext2.innerHTML = '<input type="text" name="newCarName" size="9">';
    newtext3.innerHTML = '<input type="text" name="newCarName" size="9">';
    // 新增的tr节点下增加td节点
    newRowObj.appendChild(newCheckBox);  
    newRowObj.appendChild(newtext1); 
    newRowObj.appendChild(newtext2); 
    newRowObj.appendChild(newtext3); 
    // tbody节点下增加tr节点
    tableBodyObj.appendChild(newRowObj);
   }
  }
  // 新增行数选择框检查输入必须是数字
  function checknum(strVal){
   if (strVal.length != 0){
    var r = strVal.match(new RegExp(/^[0-9]+$/));
      if (r == null){
     return false;
      }else{
       return true;
    }
   }
   return true;
  }
  // 批量删除指定的行
  function deleteRow(){
   var Tblen;
   // 得到所有 checkbox 对象
   var checkbox = document.getElementsByName("checkbox");
   //var checkboxlen = document.all.checkbox.length;
   // 得到所有提交的checkbox个数
   var checkboxlen = checkbox.length;
   var ischecked;
   // 得到删除按钮对象
   var delbutton = document.getElementById("delete");
   for (var i=0; i < checkboxlen; i++){
    // 得到表格行数
      Tblen = this.mainTb.rows.length;
      // 最终保留一行记录
      if (Tblen == 1) 
      {
          document.getElementsByName("checkbox")[0].checked = false;
          alert("A line have to be saved in the ID of mainTb!");
          // 删除按钮不可用
          delbutton.disabled = true;
          return false;
      }
      ischecked = checkbox[i].checked;
      // 如果当前的checkbox选中：删除当前节点，由于删除节点后，下面的节点上移，游标（记录行指针）

也应该上移
      if (ischecked)
      {
          // document.all("mainTb").deleteRow(i);
          document.getElementById("mainTb").deleteRow(i);
          // 游标（记录行指针）上移
          i--;
      }
      // 重新统计checkbox个数
      checkboxlen = checkbox.length;
   }
   // 删除操作后按钮状态是不可用
   delbutton.disabled = true;
  }
  // checkbox按钮单击事件处理函数：是否至少选中一行记录，是可以删除操作；如果没有选择，删除按钮不可用
  function checkBoxSel(){
   // 得到删除按钮对象
   var delbutton = document.getElementById("delete");
   if(checkselect()){
    delbutton.disabled = false;
   }else{
    delbutton.disabled = true;
    }
  }
  
  function checkselect(){
    // 得到所有 checkbox 对象
      var checkbox = document.getElementsByName("checkbox");
      // 得到所有提交的checkbox个数
      var chklength = checkbox.length;
      var flag = false;
      for(var i = 0; i < chklength; i++)
      {
          if(checkbox[i].checked == true)
          {
              flag = true;
              break;
          }
      }
      if(flag == true)
      {
          return true;
      } else {
          return false;
      }
  }
  // 页面加载body内容时执行
    function loadpage(){
   var delbutton = document.getElementById("delete");
   var rownum = document.getElementById("rownum");
   // 初始“删除”按钮不可用
   delbutton.disabled = true;
   // 初始行数输入框内容为空
   rownum.value = "";   
    }
 </script>

动态添加、删除行，分别通过insertRow，deleteRow方法实现，显示行号，通过rowIndex属性获得，基本

可以动态实现相关功能。 


<Script Language="Javascript">
var cGetRow=-99999;
var lineNo = 1;
function _(id) {
 return document.getElementById(id);
}
// The index of the row to be deleted. 
// This index starts from 0 and is relative to the logical order (not document order) 
// of all the rows contained inside the table. 
// If the index is -1 the last row in the table is deleted. 
function AddRow(){
 //添加一行
 var newTr = _("tab1").insertRow();
 //添加两列
 var newTd0 = newTr.insertCell();
 var newTd1 = newTr.insertCell();
 //设置列内容和属性
 newTd0.innerHTML = '<input type=checkbox id="box' + lineNo + '" onClick="GetRow()">'; 
 // 测试动态改变innerHTML中的checkbox的id
 alert(_("box" + lineNo).id);
 newTd1.innerText= '新增加行' + lineNo;
 lineNo++;
}

function DelRow(iIndex){
 //删除一行
 if(iIndex==-99999){
  alert("系统提示：没有选中行号!");
 }else{
  iIndex = cGetRow;
  _("tab1").deleteRow(iIndex);
 } 
}

function GetRow(){
 //获得行索引
 //两个parentElement分别是TD和TR哟，rowIndex是TR的属性
 //this.parentElement.parentElement.rowIndex
 cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex; 
}

function ShowRow(){
 //显示行号
 alert(cGetRow);
 //alert(document.getElementsByTagName("tr").length);
}

</script>


<table id="tab1" border=1>
 <tr id="tr1">
  <td width=6%><input type=checkbox id="box1" onClick="GetRow()"></td>
  <td id="a">第一行</td>
 </tr>
 <tr id="tr2">
  <td width=6%><input type=checkbox id="box2" onClick="GetRow()"></td>
  <td id="b">第二行</td>
 </tr>
 <tr id="tr3">
  <td width=6%><input type=checkbox id="box3" onClick="GetRow()"></td>
  <td id="c">第三行</td>
 </tr>
</table>
<table id="tab1" border=1>
 <tr id="tr1">
  <td width=6%><input type=checkbox id="box1" onClick="GetRow()"></td>
  <td id="a">统计</td>
 </tr>
</table>
<input type="submit" name="Submit" value="AddRow" οnclick="javascript:AddRow();">
<input type="submit" name="Submit" value="DelRow" οnclick="javascript:DelRow(cGetRow);">
<input type="submit" name="Submit" value="ShowRow" οnclick="javascript:ShowRow();">

表格动态增加行

window.open()与window.opener 的用法

相关阅读

相关文章

相关问答

相关文档