terryjs
- 浏览: 516874 次
- 性别:
- 来自: 上海
-
文章分类
- 全部博客 (278)
- java (41)
- 设计模式 (4)
- sql (10)
- webservice (2)
- spring (9)
- struts (6)
- struts2 (32)
- hibernate (27)
- Struts_hibernate_Spring整合 (4)
- Velocity (1)
- Servlet (9)
- JSP (6)
- javascript (19)
- jquery (10)
- ajax (4)
- html、xml (3)
- JDBC (2)
- JDK (6)
- mysql (2)
- oracle (11)
- SqlServer (1)
- DB2 (4)
- tool (7)
- linux (5)
- UML (1)
- eclipse (8)
- 执行文件 (1)
- 应用服务器 (4)
- 代码重构 (1)
- 日本語 (19)
- 交规 (1)
- office (9)
- firefox (1)
- net (1)
- 测试 (1)
- temp (6)
- 对日外包 (1)
- windows (1)
- 版本控制 (1)
- android (2)
- 项目管理 (1)
最新评论
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>');
}
缩略显示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();">
表格动态增加行
分享到：
发表评论
文章已被作者锁定，不允许评论。
-
dwr 框架
2016-09-20 09:59 369首先，你安装DWR时会配置一个servlet，这个servl ... -
onchange, oninput, onpropertychange 的用法和区别
2016-01-29 17:33 1303onchange, oninput, onproper ... -
javascript eval()，JSON
2014-09-15 10:33 619eval函数的工作原理 eval函数会评 ... -
.pac 脚本 语法
2011-04-15 15:52 6502PAC脚本的编写 adapt from int ... -
JavaScript 跨域 问题
2011-01-28 15:40 1226在客户端编程语言中，如javascript 和Actio ... -
javascript 技巧（一）
2010-12-15 15:07 1095一. open 居中 function newW ... -
javascript 模糊输入及多选 ，模糊查询，select等
2010-12-02 10:45 2283一个SELECT可以多选的，支持模糊查询的，支持分页的一 ... -
AJAXRPC 让 javascript 直接调用服务端方法
2010-10-12 12:17 1651AJAXPRC是快速、简单的J ... -
JavaScript 多文件上传
2010-10-08 15:05 1091多文件上传时，首先要解决的一个问题就是动态去添加或删除文 ... -
js 页面中 坐标，位置
2010-10-08 15:00 1517<html> <head> ... -
javascript trim() 写法
2010-08-04 13:07 1010javascript ，js 除去右边空格 ， trim ... -
json定义，与解析
2010-07-19 12:21 1182JSON( JavaScript Object Notati ... -
javascript 面向对象
2010-07-09 12:22 612//javascript 面向对象 转自： http ... -
javascript 正则表达式
2010-07-07 17:53 658转 http://www.iteye.com/topic/4 ... -
javascript 图片 查看
2010-07-07 17:49 631转 http://www.iteye.com/t ... -
javascript 各种验证
2010-07-07 17:43 896//验证是否为空 function check_blank( ... -
showModalDialog IE 与 firefox
2010-07-05 10:07 20081.------------------------- ... -
window.setInterval 和window.setTimeout的区别
2010-06-13 13:00 926<!-- setTimeout(表达式,延时时间) ...
相关推荐
本篇文章将深入探讨`window.open()`、`window.opener`、`window.name`以及`window`对象的一些核心概念，同时通过两个带有注释的页面示例（001.html和main.html）帮助理解这些知识点。 ### `window.open()` `window...
1. 使用`window.open`打开的新窗口中设置一个`window.opener`属性，这样新窗口可以与打开它的窗口进行通信。 2. 在新窗口中处理用户交互后，使用`window.close`关闭窗口，并在关闭前将结果通过`window.opener`通知原...
对window.open进行封装, 使其更好用, 且更兼容, 很多人说window.open不兼容,其实不是, 因为不能直接执行, 必须通过用户手动触发才行;看代码: 代码如下 var openWindow = function(url, options) { var str = ""; ...
### 使用 `window.open` 和 `window.opener` 实现网页间通信 #### 一、引言 在现代Web开发中，网页间的通信是一项常见的需求。例如，在多窗口或多个标签页的应用场景下，如何实现不同窗口间的高效数据交互，成为了...
基本使用方法 首先来看一下`window.open()`的基本用法： ```javascript window.open(URL, target, features); ``` - **URL**：指定要打开的新窗口的地址。 - **target**：指定新窗口的名字，可以是特定的名称...
首先，`window.open()`是一个广泛使用的函数，它可以在浏览器中打开一个新的窗口或者标签页。这个函数支持从JavaScript 1.0版本开始，几乎所有的现代浏览器都对其提供了支持。`window.open`的基本语法是`window.open...
在JavaScript的世界里，`window.open`、`iframe`和`dialog`是三个非常重要的概念，它们在网页交互和页面通信中扮演着关键角色。这里我们将深入探讨这些知识点，并结合实例来帮助你理解它们的用法。 1. `window.open...
在Web开发中，`window.open()`方法用于创建一个新的浏览器窗口或标签页，并返回对新打开窗口的引用。这个方法在很多场景下非常有用，比如用来实现弹出窗口、跳转链接等功能。然而，由于浏览器的安全策略和用户体验...
1> window.showModalDialog()采用JS原理实现，同时父窗口不可操作，window.open()采用新创建一个窗口，同时父窗口可操作； 2> 父窗口与子窗口传递值的方式也有所不同，在子窗口中操作父窗口也语法也不同，分别为var...
首先，让我们回顾一下`window.open()`方法的基本用法。`window.open()`方法可以打开一个新的浏览器窗口，该方法接受四个参数：url、windowName、specs、replace。其中，url参数指定了要打开的URL，windowName参数...
JavaScript中的`window.open()`和`window.opener`是两个与窗口操作密切相关的属性和方法，它们在网页交互和页面导航中扮演着重要角色。本文将深入探讨这两个特性以及它们在处理支付成功页面跳转时的应用。 `window....
总结来说，刷新由 `window.open` 打开的父页面主要依赖于 `window.opener` 属性，结合 `location.reload()` 方法实现。在某些特定情况下，如跨域或有其他需求时，可以采用上述其他通信手段来实现类似功能。在实际...
本文将从window.open方法的使用和通过弹窗返回值实现数据交互两方面，来详细解读window.open方式下如何处理JS弹窗返回值。 ### window.open方法介绍 window.open方法主要用于打开一个新的浏览器窗口。该方法的常用...
window.opener=null;window.close()，只支持IE6不支持IE7的问题 打开新窗口并且关闭本窗口不弹出要关闭窗口前的提示function openWin(){window.open(‘login.jsp’,”,’fullscreen=yes,menubar=no,resizable=no’);...
在JavaScript编程中，`window.open()` 是一个非常重要的方法，用于创建新的浏览器窗口或打开一个已存在的窗口。这个方法在Web开发中广泛用于实现各种功能，如创建弹出窗口、新标签页或替换当前页面。在本文中，我们...
如果当前窗口是通过`window.open()`方法打开的，那么`window.opener`就指向了那个调用`window.open()`的窗口。这个属性为我们在子窗口中操作或访问父窗口提供了可能。 二、跨窗口通信 1. **从子窗口向父窗口传递...
[removed] function closeWin(){ window.opener=null; window.open(”,’_self’,”); window.close(); } [removed] <a>logout</a> </body> </html> 火狐默认不支持js关闭浏览器窗口，可以在about:...
现在我们来深入探讨`window.open()` 的使用及其与父窗口通信的相关知识点。 首先，`window.open()` 函数的基本语法如下： ```javascript window.open(url, name, features); ``` - `url`: 这是新窗口要加载的页面...
支持完整的window.open api 。 为React 16构建（使用ReactDOM.createPortal ）。 阻止弹出窗口的处理程序（通过onBlock prop）。 根据父窗口或屏幕使弹出窗口居中。 安装 npm i react-new-window --save 用法 ...