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>
<scriptLANGUAGE="JavaScript">
functionopenwin() {
window.open("page.html", "newwindow", "height=100, width=400, toolbar =no,menubar=no, scrollbars=no, resizable=no, location=no, status=no")//写成一行
}
</script>
</head>
<bodyonload="openwin()">
任意的页面内容...
</body>
</html>
这里定义了一个函数openwin(),函数内容就是打开一个窗口。怎么调用呢?
方法一:
<bodyonload="openwin()">
浏览器读页面时弹出窗口;
方法二:
<bodyonunload="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.getElementByIdx_x("theTextAreaId").value= document.getElemnetById("theSelectId").value ;
window.opener 的用法
window.opener返回的是创建当前窗口的那个父窗口的引用,比如点击了a.htm上的一个链接而打开了b.htm,然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中,就可以写为:
window.opener.document.getElementByIdx_x("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','<divalign="center">'+itemCode+'</div>');
newCell =newRow.insertCell();
newCell.insertAdjacentHTML('BeforeEnd','<divalign="center">'+itemName+'</div>');
newCell =newRow.insertCell();
newCell.insertAdjacentHTML('BeforeEnd','<divalign="center"><imgsrc="../../../images/delete2.gif" width="12" height="12"onClick="userRightDel(this);"><inputtype="hidden" name="itembox"value='+itemCode+'></div>');
} 11:56 浏览 (159) 评论 (0) 分类: JavaScript2008-02-27
缩略显示confirm用法和例子
一般用于弹出对话框(确定/否)
确定:就执行其嵌套的内容;否:则反之
<scriptlanguage="javascript">
//验证时间格式YYYY-MM-DD/YYYY,MM,DD
functionisDate(date){
var regu ="^[0-9]{4}-([0-1]?)[0-9]{1}-([0-3]?)[0-9]{1}$";
varre = newRegExp(regu);
if(date.search(re) != -1)
return true;
else
return false;
}
functionsureButton(){
if(!confirm('真的要删除吗?删除后将无法恢复!')){
return;
}
//验证时间格式YYYY-MM-DD
varstartDate=document.getElementByIdx_x("startDate").value;
varendDate=document.getElementByIdx_x("endDate").value;
if(!isDate(startDate)){
alert(startDate+"请输入正确的开始日期格式!如:(YYYY-MM-DD)2008-01-01");
returndocument.getElementByIdx_x("startDate").focus();
}
if(!isDate(endDate)){
alert("请输入正确的结束日期格式!如:(YYYY-MM-DD)2008-01-01");
returndocument.getElementByIdx_x("endDate").focus();
}
if(startDate==""){
alert("请输入开始日期");
returndocument.getElementByIdx_x("startDate").focus();
}
if(endDate==""){
alert("请输入结束日期");
returndocument.getElementByIdx_x("endDate").focus();
}
startDate=startDate.replace(new RegExp('-','g'),'/');
alert(startDate);
endDate=endDate.replace(new RegExp('-','g'),'/');
varstartTime=newDate(startDate).getTime();
alert(newDate(startDate).getTime());
varendTime=newDate(endDate).getTime();
if((endTime-startTime)<0){
alert("结束日期必须大于开始日期");
returndocument.getElementByIdx_x("endDate").focus();
}
}
</script>
<html>
<head>
<meta http-equiv="Content-Language"content="zh-cn">
<meta name="generator"content="Bluefish1.0.7">
<meta name="ProgId"content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type"content="text/html;charset=gb2312">
<title></title>
<styletype="text/css">
table{color: #000000;font-family: 宋体; font-size: 12px; height:12}
t1{color:#008000;align:center}
</style>
</head>
<body topmargin="0"leftmargin="0">
<divalign="left">
<table border="0"cellpadding="0" cellspacing="0"bordercolor="#111111" width="461" height="8" id="AutoNumber1"background="images/kabg.gif">
<tr>
<tdcolspan="3">
<table cellpadding="0" cellspacing="0" bordercolor="#111111"width="100%"height="17">
<tr>
<td width="19%" height="25" align="center"><fontcolor="#008000">开始日期</font></td>
<td width="31%">
<input name="startDate" type="text" id="startDate"size="15"></td>
<td width="22%" align="center"><fontcolor="#008000">结束日期</font></td>
<td width="28%">
<input name="endDate" type="text" id="endDate"size="15"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="28" align="center"colspan="3">
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111"width="100%" id="AutoNumber3"height="17">
<tr>
<td width="14%" align="center"height="25">
<fontcolor="#008000">当前状态</font></td>
<td width="18%" align="center"height="25">
<select size="1"name="display">
<optionvalue="0">无效</option>
<optionvalue="1">等待</option>
<option value="2"selected>显示中</option>
</select></td>
<td width="15%" align="center" height="25">
<fontcolor="#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"><fontcolor="#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">
<input onclick="cancelButton()" type="reset"value="关闭" name="B2">
<input onclick="sureButton()" type="submit"value="确定" name="B1"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" colspan="3" align="center">
<marquee behavior="slide">::日期格式为年-月-日,直接填入图片和点击路径全名时应仔细查对是否正确::</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 toTable</title>
<scriptlanguage="JavaScript">
// 新增行
function addRow(){
var textNum =document.getElementByIdx_x("rownum");
//得到新增行记录的行数
var index =textNum.value;
if(!checknum(index)){
alert("Youcan only input number in the TEXT!");
textNum.focus();
textNum.select();
}
for(var i = 0;i < index; i++){
//得到表格对象
var tableObj= document.getElementByIdx_x("mainTb");
//得到tbody对象
vartableBodyObj = document.getElementByIdx_x("mainBody");
varnewRowObj = document_createElement_x("tr");
varnewCheckBox = document_createElement_x("td");
var newtext1= document_createElement_x("td");
var newtext2= document_createElement_x("td");
var newtext3= document_createElement_x("td");
newCheckBox.innerHTML ='<center><inputtype="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.a(newCheckBox);
newRowObj.a(newtext1);
newRowObj.a(newtext2);
newRowObj.a(newtext3);
// tbody节点下增加tr节点
tableBodyObj.a(newRowObj);
}
}
// 新增行数选择框检查输入必须是数字
function checknum(strVal){
if(strVal.length != 0){
var r =strVal.match(new RegExp(/^[0-9]+$/));
if (r == null){
return false;
}else{
returntrue;
}
}
returntrue;
}
// 批量删除指定的行
function deleteRow(){
var Tblen;
// 得到所有checkbox 对象
var checkbox =document.getElementsByName("checkbox");
//varcheckboxlen = document.all.checkbox.length;
//得到所有提交的checkbox个数
varcheckboxlen = checkbox.length;
varischecked;
//得到删除按钮对象
var delbutton= document.getElementByIdx_x("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.getElementByIdx_x("mainTb").deleteRow(i);
// 游标(记录行指针)上移
i--;
}
// 重新统计checkbox个数
checkboxlen = checkbox.length;
}
//删除操作后按钮状态是不可用
delbutton.disabled = true;
}
//checkbox按钮单击事件处理函数:是否至少选中一行记录,是可以删除操作;如果没有选择,删除按钮不可用
function checkBoxSel(){
//得到删除按钮对象
var delbutton= document.getElementByIdx_x("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内容时执行
functionloadpage(){
var delbutton= document.getElementByIdx_x("delete");
var rownum =document.getElementByIdx_x("rownum");
//初始“删除”按钮不可用
delbutton.disabled = true;
//初始行数输入框内容为空
rownum.value ="";
}
</script>
动态添加、删除行,分别通过insertRow,deleteRow方法实现,显示行号,通过rowIndex属性获得,基本可以动态实现相关功能。
<ScriptLanguage="Javascript">
var cGetRow=-99999;
var lineNo = 1;
function _(id) {
returndocument.getElementByIdx_x(id);
}
// The index of the row to be deleted.
// This index starts from 0 and is relative to thelogical order (not document order)
// of all the rows contained inside the table.
// If the index is -1 the last row in the table isdeleted.
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_r("tr").length);
}
</script>
<table id="tab1"border=1>
<trid="tr1">
<tdwidth=6%><input type=checkboxid="box1"onClick="GetRow()"></td>
<tdid="a">第一行</td>
</tr>
<trid="tr2">
< tdwidth=6%><input type=checkboxid="box2"onClick="GetRow()"></td>
<tdid="b">第二行</td>
</tr>
<trid="tr3">
<tdwidth=6%><input type=checkboxid="box3"onClick="GetRow()"></td>
<tdid="c">第三行</td>
</tr>
</table>
<table id="tab1"border=1>
<trid="tr1">
<tdwidth=6%><input type=checkboxid="box1"onClick="GetRow()"></td>
<tdid="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();">表格动态增加行