程序博客网 > sqlserver 绝对值函数

window.open , window.opener 的用法

来源：互联网 发布：sqlserver 绝对值函数 编辑：程序博客网 时间：2024/05/19 13:06

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


基本语法：

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

示例：

Html代码 复制代码 收藏代码
  1. <SCRIPT> 
  2. <!-- 
  3. 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') 
  4. //写成一行 
  5. --> 
  6. </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代码 复制代码 收藏代码
  1. <html> 
  2. <head> 
  3.   <script LANGUAGE="JavaScript"> 
  4.    function openwin() { 
  5.     window.open ("page.html", "newwindow", "height=100,width=400,toolbar =no,menubar=no,scrollbars=no,resizable=no,location=no,status=no") //写成一行 
  6.    } 
  7.   </script> 
  8. </head> 
  9. <body onload="openwin()"> 
  10.   任意的页面内容... 
  11. </body> 
  12. </html> 

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

方法一：

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

方法二：

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

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

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

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

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

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

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

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

Js代码 复制代码 收藏代码
  1. 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中，就可以写为：

Js代码 复制代码 收藏代码
  1. window.opener.document.getElementById("name").value ="输入的数据"; 

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

Js代码 复制代码 收藏代码
  1. opener.parent.frames['frameName'].document.all.input1.value 


即opener这个对象为前一个窗口，可以使用window.opener.document...调用document的相关方法，例如下面的例子，插入一些table行到前一个窗口：

Js代码 复制代码 收藏代码
  1. function taletoTb(itemStr) {   
  2.         newRow = opener.document.all.itemTb.insertRow(opener.document.all.itemTb.rows.length);   
  3.         rowCnt = opener.document.all.itemTb.rows.length;   
  4.         newCell = newRow.insertCell();   
  5.         newCell.insertAdjacentHTML('BeforeEnd','<div align="center">'+itemCode+'</div>');   
  6.         newCell = newRow.insertCell();   
  7.         newCell.insertAdjacentHTML('BeforeEnd','<div align="center">'+itemName+'</div>');   
  8.         newCell = newRow.insertCell();   
  9.         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>');   
  10.      }   


缩略显示confirm用法和例子
一般用于弹出对话框（确定／否）
确定：就执行其嵌套的内容；否：则反之

Html代码 复制代码 收藏代码
  1. <script language="javascript">   
  2. //验证时间格式  YYYY-MM-DD/YYYY,MM,DD   
  3. function isDate(date){   
  4.     var regu = "^[0-9]{4}-([0-1]?)[0-9]{1}-([0-3]?)[0-9]{1}$";   
  5.     var re   = new RegExp(regu);   
  6.     if (date.search(re) != -1)   
  7.         return true;   
  8.     else  
  9.         return false;   
  10. }    
  11. function sureButton(){   
  12.    if(!confirm('真的要删除吗？删除后将无法恢复！')){   
  13.        return;   
  14.    }   
  15.    //验证时间格式  YYYY-MM-DD   
  16.   
  17.        var startDate=document.getElementById("startDate").value;   
  18.        var endDate=document.getElementById("endDate").value;    
  19.        if(!isDate(startDate)){   
  20.                    
  21.              alert(startDate+"请输入正确的开始日期格式!如:(YYYY-MM-DD)2008-01-01");   
  22.              return document.getElementById("startDate").focus();   
  23.        }   
  24.        if(!isDate(endDate)){   
  25.              alert("请输入正确的结束日期格式!如:(YYYY-MM-DD)2008-01-01");   
  26.              return document.getElementById("endDate").focus();   
  27.        }   
  28.          if(startDate==""){   
  29.     alert("请输入开始日期");   
  30.     return document.getElementById("startDate").focus();   
  31.    }   
  32.    if(endDate==""){   
  33.     alert("请输入结束日期");   
  34.     return document.getElementById("endDate").focus();   
  35.    }    
  36.    startDatestartDate=startDate.replace(new RegExp('-', 'g'),'/');   
  37.    alert(startDate);   
  38.    endDateendDate=endDate.replace(new RegExp('-', 'g'),'/');   
  39.    var startTime=new Date(startDate).getTime();   
  40.    alert(new Date(startDate).getTime());   
  41.    var endTime=new Date(endDate).getTime();   
  42.    if((endTime-startTime)<0){   
  43.     alert("结束日期必须大于开始日期");   
  44.         return document.getElementById("endDate").focus();   
  45.    }      
  46.       
  47.       
  48. }   
  49. </script>  
  50.  
  51. <html>    
  52. <head>   
  53. <meta http-equiv="Content-Language"content="zh-cn">   
  54. <meta name="generator"content="Bluefish 1.0.7">   
  55. <meta name="ProgId"content="FrontPage.Editor.Document">   
  56. <meta http-equiv="Content-Type"content="text/html; charset=gb2312">   
  57. <title></title>   
  58. <style type="text/css">   
  59.   table{color: #000000; font-family: 宋体; font-size: 12px; height:12 }   
  60.   t1{color:#008000;align:center}   
  61. </style>   
  62. </head>   
  63.   
  64. <body topmargin="0"leftmargin="0">   
  65.   
  66. <div align="left">   
  67.   <table border="0"cellpadding="0"cellspacing="0"style="border-collapse: collapse"bordercolor="#111111"width="461"height="8"id="AutoNumber1"background="images/kabg.gif">   
  68.     
  69.     <tr>   
  70.       <td colspan="3">   
  71.       <tablecellpadding="0"cellspacing="0"style="border-collapse: collapse"bordercolor="#111111"width="100%"height="17">   
  72.           <tr>   
  73.        <tdwidth="19%"height="25"align="center"style="border:1px solid #000080;"><fontcolor="#008000">开始日期</font></td>   
  74.        <tdwidth="31%"style="border:1px solid #000080;">    
  75.               <inputname="startDate"type="text"id="startDate"size="15"></td>   
  76.        <tdwidth="22%"align="center"style="border:1px solid #000080;"><fontcolor="#008000">结束日期</font></td>   
  77.        <tdwidth="28%"style="border:1px solid #000080;">    
  78.               <inputname="endDate"type="text"id="endDate"size="15"></td>   
  79.        </tr>   
  80.        </table>   
  81.        </td>   
  82.     </tr>   
  83.   
  84.     <tr>   
  85.       <td height="28"align="center"style="border:1px solid #000080; "colspan="3">   
  86.       <tableborder="0"cellpadding="0"cellspacing="0"style="border-collapse: collapse"bordercolor="#111111"width="100%"id="AutoNumber3"height="17">   
  87.         <tr>   
  88.           <tdwidth="14%"align="center"height="25">   
  89.       <fontcolor="#008000">当前状态</font></td>   
  90.           <tdwidth="18%"align="center"height="25">   
  91.       <selectsize="1"name="display">   
  92.       <optionvalue="0">无效</option>   
  93.       <optionvalue="1">等待</option>   
  94.       <optionvalue="2" selected>显示中</option>   
  95.       </select></td>   
  96.           <tdwidth="15%"align="center"height="25"style="border-left: 1px solid #000080; border-right-width: 1; border-top-width: 1; border-bottom-width: 1">   
  97.           <fontcolor="#008000">Logo行宽</font></td>   
  98.           <tdwidth="10%"align="center"height="25">   
  99.       <selectsize="1"name="colValue">   
  100.       <option>1</option>   
  101.       <option>2</option>   
  102.       <option>3</option>   
  103.       <option>4</option>   
  104.       <option>5</option>   
  105.       <option>6</option>   
  106.       </select></td>   
  107.        <tdwidth="12%"align="center"style="border-left: 1px solid #000080; border-right-width: 1; border-top-width: 1; border-bottom-width: 1"><fontcolor="#008000">显示顺序</font></td>   
  108.        <tdwidth="5%">    
  109.               <inputname="displayOrder"type="text"id="displayOrder"size="3"value="1">   
  110.      </td>   
  111.           <tdwidth="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">   
  112.       <inputonclick="cancelButton()"type="reset"value="关闭"name="B2"style="border-style: outset; border-width: 1; color:#0000FF">    
  113.       <inputonclick="sureButton()"type="submit"value="确定"name="B1"style="border-style: outset; border-width: 1; color:#0000FF"></td>   
  114.         </tr>   
  115.       </table>   
  116.       </td>   
  117.     </tr>   
  118.     <tr>   
  119.       <td height="20"colspan="3"align="center"style="border:1px solid #000080; ">   
  120.       <marqueebehavior="slide"style="color: #808080">::日期格式为年-月-日,直接填入图片和点击路径全名时应仔细查对是否正确::</marquee></td>   
  121.     </tr>   
  122.   </table>   
  123. </div>   
  124.   
  125. </body>   
  126.   
  127. </html> 


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

Html代码 复制代码 收藏代码
  1. <html> 
  2.   <head> 
  3.     <meta http-equiv="Content-Type"content="text/html; charset=shift-js"> 
  4.     <title>The page of append rows to Table</title> 
  5.  
  6.  
  7. <script language="JavaScript"> 
  8.   // 新增行 
  9.   function addRow(){ 
  10.    var textNum = document.getElementById("rownum"); 
  11.    // 得到新增行记录的行数 
  12.    var index = textNum.value; 
  13.    if(!checknum(index)){ 
  14.     alert("You can only input number in the TEXT!"); 
  15.     textNum.focus(); 
  16.     textNum.select(); 
  17.    } 
  18.    for(var i = 0; i< index; i++){ 
  19.     // 得到表格对象 
  20.     var tableObj = document.getElementById("mainTb"); 
  21.     // 得到tbody对象 
  22.     var tableBodyObj = document.getElementById("mainBody"); 
  23.     var newRowObj = document.createElement("tr"); 
  24.     var newCheckBox = document.createElement("td"); 
  25.     var newtext1 = document.createElement("td"); 
  26.     var newtext2 = document.createElement("td"); 
  27.     var newtext3 = document.createElement("td"); 
  28.     newCheckBox.innerHTML = '<center><input type="Checkbox" name="checkbox" onclick = "checkBoxSel()"></center>'; 
  29.     newtext1.innerHTML = '<input type="text" name="newCarName" size="9">'; 
  30.     newtext2.innerHTML = '<input type="text" name="newCarName" size="9">'; 
  31.     newtext3.innerHTML = '<input type="text" name="newCarName" size="9">'; 
  32.     // 新增的tr节点下增加td节点 
  33.     newRowObj.appendChild(newCheckBox);  
  34.     newRowObj.appendChild(newtext1); 
  35.     newRowObj.appendChild(newtext2); 
  36.     newRowObj.appendChild(newtext3); 
  37.     // tbody节点下增加tr节点 
  38.     tableBodyObj.appendChild(newRowObj); 
  39.    } 
  40.   } 
  41.   // 新增行数选择框检查输入必须是数字 
  42.   function checknum(strVal){ 
  43.    if (strVal.length != 0){ 
  44.     var r = strVal.match(new RegExp(/^[0-9]+$/)); 
  45.       if (r == null){ 
  46.      return false; 
  47.       }else{ 
  48.        return true; 
  49.     } 
  50.    } 
  51.    return true; 
  52.   } 
  53.   // 批量删除指定的行 
  54.   function deleteRow(){ 
  55.    var Tblen; 
  56.    // 得到所有 checkbox 对象 
  57.    var checkbox = document.getElementsByName("checkbox"); 
  58.    //var checkboxlen = document.all.checkbox.length; 
  59.    // 得到所有提交的checkbox个数 
  60.    var checkboxcheckboxlen = checkbox.length; 
  61.    var ischecked; 
  62.    // 得到删除按钮对象 
  63.    var delbutton = document.getElementById("delete"); 
  64.    for (var i=0; i< checkboxlen; i++){ 
  65.     // 得到表格行数 
  66.       Tblen = this.mainTb.rows.length; 
  67.       // 最终保留一行记录 
  68.       if (Tblen == 1) 
  69.       { 
  70.           document.getElementsByName("checkbox")[0].checked =false; 
  71.           alert("A line have to be saved in the ID of mainTb!"); 
  72.           // 删除按钮不可用 
  73.           delbutton.disabled = true; 
  74.           return false; 
  75.       } 
  76.       ischecked = checkbox[i].checked; 
  77.       // 如果当前的checkbox选中：删除当前节点，由于删除节点后，下面的节点上移，游标（记录行指针）也应该上移 
  78.       if (ischecked) 
  79.       { 
  80.           // document.all("mainTb").deleteRow(i); 
  81.           document.getElementById("mainTb").deleteRow(i); 
  82.           // 游标（记录行指针）上移 
  83.           i--; 
  84.       } 
  85.       // 重新统计checkbox个数 
  86.       checkboxcheckboxlen = checkbox.length; 
  87.    } 
  88.    // 删除操作后按钮状态是不可用 
  89.    delbutton.disabled = true; 
  90.   } 
  91.   // checkbox按钮单击事件处理函数：是否至少选中一行记录，是可以删除操作；如果没有选择，删除按钮不可用 
  92.   function checkBoxSel(){ 
  93.    // 得到删除按钮对象 
  94.    var delbutton = document.getElementById("delete"); 
  95.    if(checkselect()){ 
  96.     delbutton.disabled = false; 
  97.    }else{ 
  98.     delbutton.disabled = true; 
  99.     } 
  100.   } 
  101.   
  102.   function checkselect(){ 
  103.     // 得到所有 checkbox 对象 
  104.       var checkbox = document.getElementsByName("checkbox"); 
  105.       // 得到所有提交的checkbox个数 
  106.       var chklength = checkbox.length; 
  107.       var flag = false; 
  108.       for(var i = 0; i< chklength; i++) 
  109.       { 
  110.           if(checkbox[i].checked == true) 
  111.           { 
  112.               flag = true; 
  113.               break; 
  114.           } 
  115.       } 
  116.       if(flag == true) 
  117.       { 
  118.           return true; 
  119.       } else { 
  120.           return false; 
  121.       } 
  122.   } 
  123.   // 页面加载body内容时执行 
  124.     function loadpage(){ 
  125.    var delbutton = document.getElementById("delete"); 
  126.    var rownum = document.getElementById("rownum"); 
  127.    // 初始“删除”按钮不可用 
  128.    delbutton.disabled = true; 
  129.    // 初始行数输入框内容为空 
  130.    rownum.value = "";   
  131.     } 
  132. </script> 

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

Html代码 复制代码 收藏代码
  1. <Script Language="Javascript"> 
  2. var cGetRow=-99999; 
  3. var lineNo = 1; 
  4. function _(id) { 
  5. return document.getElementById(id); 
  6. } 
  7. // The index of the row to be deleted. 
  8. // This index starts from 0 and is relative to the logical order (not document order) 
  9. // of all the rows contained inside the table. 
  10. // If the index is -1 the last row in the table is deleted. 
  11. function AddRow(){ 
  12. //添加一行 
  13. var newTr = _("tab1").insertRow(); 
  14. //添加两列 
  15. var newTd0 = newTr.insertCell(); 
  16. var newTd1 = newTr.insertCell(); 
  17. //设置列内容和属性 
  18. newTd0.innerHTML = '<input type=checkbox id="box' + lineNo + '"onClick="GetRow()">'; 
  19. // 测试动态改变innerHTML中的checkbox的id 
  20. alert(_("box" + lineNo).id); 
  21. newTd1.innerText= '新增加行' + lineNo; 
  22. lineNo++; 
  23. } 
  24.  
  25. function DelRow(iIndex){ 
  26. //删除一行 
  27. if(iIndex==-99999){ 
  28.   alert("系统提示：没有选中行号!"); 
  29. }else{ 
  30.   iIndex = cGetRow; 
  31.   _("tab1").deleteRow(iIndex); 
  32. } 
  33. } 
  34.  
  35. function GetRow(){ 
  36. //获得行索引 
  37. //两个parentElement分别是TD和TR哟，rowIndex是TR的属性 
  38. //this.parentElement.parentElement.rowIndex 
  39. cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex; 
  40. } 
  41.  
  42. function ShowRow(){ 
  43. //显示行号 
  44. alert(cGetRow); 
  45. //alert(document.getElementsByTagName("tr").length); 
  46. } 
  47.  
  48. </script> 
  49.  
  50.  
  51. <table id="tab1"border=1> 
  52. <tr id="tr1"> 
  53.   <td width=6%><inputtype=checkboxid="box1"onClick="GetRow()"></td> 
  54.   <td id="a">第一行</td> 
  55. </tr> 
  56. <tr id="tr2"> 
  57.   <td width=6%><inputtype=checkboxid="box2"onClick="GetRow()"></td> 
  58.   <td id="b">第二行</td> 
  59. </tr> 
  60. <tr id="tr3"> 
  61.   <td width=6%><inputtype=checkboxid="box3"onClick="GetRow()"></td> 
  62.   <td id="c">第三行</td> 
  63. </tr> 
  64. </table> 
  65. <table id="tab1"border=1> 
  66. <tr id="tr1"> 
  67.   <td width=6%><inputtype=checkboxid="box1"onClick="GetRow()"></td> 
  68.   <td id="a">统计</td> 
  69. </tr> 
  70. </table> 
  71. <input type="submit"name="Submit"value="AddRow"onclick="javascript:AddRow();"> 
  72. <input type="submit"name="Submit"value="DelRow"onclick="javascript:DelRow(cGetRow);"> 
  73. <input type="submit"name="Submit"value="ShowRow"onclick="javascript:ShowRow();"> 

表格动态增加行

sqlserver 绝对值函数 sqlserver 绝对值函数
原创粉丝点击
热门IT博客
招商证券交易软件招商证券交易软件
如何添加178软件源如何添加178软件源
树立威信的方法 知乎
数据挖掘与算法 pdf
官方通达信看盘软件
淘宝店直通车怎么开
计算机二级软件
js div 滚动条到底部
降低媒体音量软件
网上报销软件
淘宝抠图教程
ip代理软件免费版
linux dhcp
西王母国 知乎
中国人现实 知乎
八中管理学校数据谷
圆方网络注册平台
wxpython python 3.4
淘宝快递助手在哪订购
apache ant 1.9.7 bin
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 泡棉胶 3m双面泡棉胶 泡棉胶贴 3m泡棉胶垫 胶带的胶怎么去除 eva单面胶垫 胶带纸的胶怎么去除 胶带用胶 双面胶的胶怎么去除 3m双面胶带 除胶带留下的胶 网红泡椒 泡椒网手机软件下载大全 泡椒怎么弄 泡椒怎样做 泡椒藕片的腌制做法 泡椒藕丁 泡椒藕带炒什么好吃 泡椒藕丁的做法 泡椒藕片 焖藕 泡椒炒藕带 泡水车的危害 泡水车修好后影响大吗 泡水车怎么识别 泡水车能买吗 泡水车修好后还能开几年 泡水车专卖网 二手泡水车交易平台 车泡水了对车有什么影响 10万泡水车报废能赔多少 10万泡水车能卖多少 怎样识别泡水车 泡水车鉴别 怎么看泡水车 泡水车怎么看 如何鉴别泡水车 怎么分辨泡水车 转向柱生锈是泡水车吗 三分钟教你鉴定泡水车 松下洗衣机泡沫净系列

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里