window.open的具体用法 window.open用法

分享人:夏苏年来源:互联网31

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 | 是否和父窗口同时关闭

window.open的具体用法 window.open用法

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();">表格动态增加行

  
window.open用法 window.open的用法 

爱华网本文地址 » http://www.aihuau.com/a/25101014/226001.html

更多阅读

睫毛膏的正确用法 睫毛膏如何使用

　　睫毛膏对于很多女孩子来说其实并不陌生，但是大家真的知道睫毛膏的正确用法吗，如何使用睫毛膏才能让自己的睫毛更翘、更卷，而且看起来不会显得很僵硬呢，如果你还不懂那就来一起学习一下睫毛膏的正确用法吧。睫毛膏的正确用法——工

移动铁通光纤路由器的具体设置 移动光纤是铁通吗

移动铁通光纤路由器的具体设置——简介铁通人员来装好了宽带，我们自己怎么设置路由呢？移动铁通光纤路由器的具体设置——方法/步骤移动铁通光纤路由器的具体设置 1、首先，我们连接路由，说明书有线路图移动铁通光纤路由器的具体设置 2

香卤牛肉 的具体做法 卤牛肉的家常做法

香卤牛肉 的具体做法——简介牛键子肉，即牛前后腿上的肌肉，有肉膜包裹的，藏筋，硬度适中，纹路规则，横着切开有漂亮的花纹，最适合卤味。卤后的肉酥软又有嚼劲，而且调料味道充分融入肉中，香美无比，下酒或作宴会冷碟都很不错。香卤牛肉 的具体做

结婚的具体流程 结婚流程 细节

结婚的具体流程——简介?结婚，法律上称为婚姻成立。是指男女双方依照法律规定的条件和程序确立夫妻关系的民事法律行为，并承担由此而产生的权利、义务及其他责任。下面我来告诉你,结婚从头到尾的流程。结婚的具体流程——方法/步

声明:《window.open的具体用法 window.open用法》为网友夏苏年分享！如侵犯到您的合法权益请联系我们删除