`
qepipnu
  • 浏览: 76847 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

window.open()运用

阅读更多
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 onload="openwin()">
  任意的页面内容...
</body>
</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页面中加入下面代码:

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 onclick="cancelButton()" type="reset" value="关闭" name="B2" style="border-style: outset; border-width: 1; color:#0000FF">   
      <input onclick="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" onclick="javascript:AddRow();">
<input type="submit" name="Submit" value="DelRow" onclick="javascript:DelRow(cGetRow);">
<input type="submit" name="Submit" value="ShowRow" onclick="javascript:ShowRow();"> 表格动态增加行

分享到:
评论

相关推荐

    window.open的参数详细应用

    ### window.open 的参数详细应用 在网页开发过程中,`window.open` 方法被广泛应用于打开新的浏览器窗口或标签页。此方法对于实现弹出窗口、预览功能等具有重要作用。下面将详细探讨 `window.open` 方法的各项参数...

    js中window.open打开一个新的页面

    在JavaScript中,`window.open` 是一个非常重要的方法,它用于在浏览器窗口中打开新的、现有的或已命名的窗口。这个方法在网页交互和动态内容...在编写交互式网页时,理解并熟练运用 `window.open` 方法是非常重要的。

    js实现window.open不被拦截的解决方法汇总

    文章中提到了几种实现 `window.open()` 方法不被浏览器拦截的解决方法,其中包括新建 `a` 标签模拟点击、使用 `window.showModalDialog()` 方法和使用 `setTimeout()` 与 `window.open()` 结合的方式。 1. 新建 `a`...

    js中window.open()的所有参数详细解析

    JavaScript中的`window.open()`函数是用于打开新浏览器窗口的一个重要方法。这个函数具有广泛的灵活性,可以用来创建定制化的窗口,包括设置窗口的大小、位置、是否有工具栏、菜单栏等特性。下面是对`window.open()`...

    图片旋转支持所有浏览器

    通过合理运用CSS3的transform属性和JavaScript技术,我们可以实现图片在各种浏览器中的旋转,并通过服务器端处理或前端优化来提高用户体验。同时,结合用户交互设计,可以提供更加直观和便捷的图片操作体验。

    window.XMLHttpRequest详解(AJAX工作原理)2

    ### window.XMLHttpRequest详解...通过对 `XMLHttpRequest` 对象的合理运用,可以实现动态网页的各种功能,如用户输入验证、动态内容加载等。掌握 `XMLHttpRequest` 的使用对于前端开发者来说是非常重要的技能之一。

    HTML5本地存储——IndexedDB

    这篇博文将深入探讨IndexedDB的核心概念、用途以及如何在实际项目中运用。 IndexedDB是一种非关系型数据库,它允许在浏览器中存储大量结构化数据,并支持索引,从而可以高效地查询这些数据。与传统的Web存储如...

    弹窗脚本 js open

    在JavaScript(JS)中,`window.open()` 是一个非常实用的函数,用于创建新的浏览器窗口或者打开已有的窗口。这个函数在网页开发中常用于...通过查看这些文件,可以更深入地理解 `window.open()` 在实际项目中的运用。

    JavaScript_之Window对象.doc

    JavaScript中的Window对象是全局对象,它是每个浏览器窗口的核心,提供了许多与浏览器窗口交互的方法...对于初学者来说,理解并熟练运用Window对象的各种方法是JavaScript学习的基础,也是提高Web开发能力的关键一步。

    JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题

    本文将介绍两种简单的方法来实现这一功能,并讨论`window.open()`方法在创建新窗口时可能遇到的拦截问题。 首先,我们来探讨如何判断鼠标进入容器的方向。一种方法是基于圆和反正切三角函数。这种方法假设容器的...

    window属性大全

    `window.open(URL, windowName, windowFeatures)` 用于打开一个新的浏览器窗口或重新加载已存在的窗口。URL是你要加载的页面地址,windowName是窗口的名称(可以用于引用窗口),windowFeatures是一个包含各种窗口...

    解决layui-open关闭自身窗口的问题

    layui是一款流行的前端UI框架,它的弹窗功能(layui-open)被广泛用于网页中的模态对话框、信息提示等场景。在使用过程中,有时我们需要关闭由layui-...在实际开发中,理解并熟练运用这些方法,能有效提升用户体验。

    javascript跳转与返回和刷新页面的实例代码.docx

    本文将深入探讨如何使用JavaScript实现页面跳转、返回以及刷新,并通过具体的示例代码来说明`window.open()`与`window.location.href`的区别。 #### 二、JavaScript中的页面跳转 页面跳转通常指的是将用户从当前...

    javascript经典特效---窗口定制打开.rar

    1. **window.open()函数**:它的基本语法是`window.open(url, name, features)`。`url`是新窗口加载的页面地址,`name`是新窗口的名称,可以用于引用窗口,`features`是一个包含各种窗口特性的字符串,如宽度、高度...

    javascript经典特效---同时打开多个链接.rar

    1. **window.open()方法**:这是JavaScript中用于打开新浏览器窗口的关键函数。它的基本语法是`window.open(url, name, features)`。`url`参数指定要打开的页面地址,`name`参数可以为新窗口指定一个名称,`features...

    用JS制作9种弹出小窗口(HTML).pdf

    基本的弹出窗口通过`window.open()`函数实现。例如: ```javascript window.open("page.html"); ``` 此代码会在新窗口中打开`page.html`。 2. **自定义弹出窗口** 可以通过`window.open()`函数的第三个...

    javascript经典特效---在页面中打开页面.rar

    var newWindow = window.open(url, "新窗口"); if (!newWindow) { alert("浏览器阻止了新窗口的打开,请允许弹窗"); } } ``` 在这个例子中,`return false;`用于阻止`&lt;a&gt;`标签的默认行为(即跳转)。 除了`...

    即用即查-JavaScript核心对象参考手册 window

    JavaScript是Web开发中不可或缺的...通过深入理解和熟练运用Window对象,开发者可以有效地控制浏览器的行为,创建丰富的交互式Web应用。这个参考手册的源代码提供了实际示例,帮助读者更好地掌握Window对象的使用技巧。

    pdf.js前端插件,用于在线预览pdf文件

    - **加载文件**:使用`window.open()`函数创建新窗口,并传递预览参数,如示例所示。`fileUrl`是待预览PDF的URL。 - **预览界面**:`viewer.html`是PDF.js内置的预览界面,它会解析并显示指定的PDF文件。 3. **...

Global site tag (gtag.js) - Google Analytics