JavaScript(四) Window窗体操作

window:

属性(值或者子对象):
opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口。

方法(函数):
事件(事先设置好的程序,被触发):

1.window.open("第一部分","第二部分","第三部分","第四部分");

特征参数:

第一部分:写要打开的页面地址
第二部分:打开的方式,_blank 是在新窗口打开
第三部分:控制打开的窗口,可以写多个,用空格隔开
              toolbar=no新打开的窗口无工具条
              menubar=no无菜单栏 status=no无状态栏
              width=100 height=100 宽度高度
              left=100 打开的窗口距离左边多少距离
              resizable=no窗口大小不可调
              scrollbars=yes 出现滚动条
              location=yes 有地址栏

返回值:新打开的窗口对象

2:最简单的打开窗口
window.open("http://www.baidu.com","_blank","toolbar=no");  在一个新窗口中打开百度。

3:打开窗口,并保存在一个变量中
var w= window.open();

4:只打开窗口一次,例子如下:

if(w==null)
{
w=window.open("http://www.baidu.com","_blank","toolbar=no");
}

这里用一个if语句,判断w的值是否为空,打开一个窗口之后w的值就不为空了,之后再点击鼠标调用此函数则不执行打开新窗口。

5:保存所有打开的窗口,将每个打开的窗口值存入一个数组之中。

function openW()
{
w[i++]=window.open();
}

6: close():关闭指定的窗口

window.close():关闭当前窗口
     w.close():关闭w窗口
     关闭多个子窗口:放在数组中的窗口:w[i].close();
     关闭打开当前窗口的源窗口
     window.opener.close();

7:综合实例

(1)只打开一个窗口,并且关闭子窗口

首先在body中定义两个div,用onclick="openW()" 或者onclick="closeW()"来设置为鼠标单击后触发,调用函数openW和closeW;

<div style="margin:10px;padding:10px;border:1px solid blue; cursor:pointer;float:left" onclick="openW()" >
打开一个窗口
</div>
<div style="margin:10px;padding:10px;border:1px solid blue; cursor:pointer;float:left" onclick="closeW()" >
关闭窗口
</div>

在JavaScript语句中写如下代码:

<script language="javascript">
var w;
function openW()
{
    if(w==null)
    {
    w=window.open("http://www.baidu.com","_blank","toolbar=no");
    }
}

function closeW()
{
    w.close();
}

</script>

效果如下图:

点击打开窗口,弹出了一个新的窗口,再次点击打开窗口由于w中的值不为空了,所以无法再打开一个窗口:

点击关闭窗口之后,则将子窗口关闭。

(2)打开一组窗口,点击关闭窗口的时候将全部的子窗口关掉

利用数组w存储每个打开的窗口,在关闭的时候用w[i]关掉所有的子窗口,在JavaScript语句中写如下代码:

var w = new Array();
var i=0;
function openW()
{ 

    w[i]=window.open("http://www.baidu.com","_blank","toolbar=no");
    i++;

}

function closeW()
{
    for(var n=0;n<w.length;n++)
    {
    w[n].close();
    }
}

打开了多个窗口:

点击关闭所有窗口,则一键关闭了所有打开的子窗口。

(3)在子窗口中关闭源窗口:

在子窗口的文件中定义两个函数,一个是关闭自己窗口,一个是关闭源窗口即上一级窗口,在body中用onclick设置为点击关闭当前窗口的时候调用c()函数,点击关闭打开当前窗口的源时候调用cc()函数:

function c()
{
    window.close();
}
function cc()
{
    window.opener.close();
}

效果如下图:

8:间隔和延迟:

window.setInterval("要执行的代码",间隔的毫秒数)
window.clearInterval(间隔的id); 循环一次之后用来清除隔几秒执行的代码

window.setTimeout("要执行的代码",延迟的毫秒数)
window.clearTimeout(延迟的id);清除setTimeout,一般延迟执行较为常用。

(1)间隔执行的例子,其作用是间隔5秒弹出三个窗口,再经过10秒将其关闭。

将window.setInterval("ok()",5000)用一个id来接收,将
window.setInterval("cc()",10000)用id2来接收,在程序调用ok()的时候打开三个网页,之后用
window.clearInterval(id);来清除id的循环,之后调用函数cc()来关闭三个窗口,之后也是清除:

var id,id2;
var sina,qq,xinhua
function cc()
{
    sina.close();
    qq.close();
    xinhua.close();
    window.clearInterval(id2);
}
function ok()
{
    sina = window.open("http://www.sina.com.cn","_blank","toolbar=no width=300 height=200 top=100 left=0");
    qq = window.open("http://www.qq.com","_blank","toolbar=no width=300 height=200 top = 100 left=500");
    xinhua = window.open("http://www.xinhuanet.com","_blank","toolbar=no width=300 height=200 top=300 left=200");

    window.clearInterval(id);

    id2 = window.setInterval("cc()",10000);
}
id = window.setInterval("ok()",5000);

(2)延迟执行的例子,其作用也是间隔5秒弹出三个窗口,再经过10秒将其关闭。

这里用了延迟执行就不用清除了,所以一般常用延迟执行。

function cc()
{
    sina.close();
    qq.close();
    xinhua.close();
}
function ok()
{
    sina = window.open("http://www.sina.com.cn","_blank","toolbar=no width=300 height=200 top=100 left=0");
    qq = window.open("http://www.qq.com","_blank","toolbar=no width=300 height=200 top = 100 left=500");
    xinhua = window.open("http://www.xinhuanet.com","_blank","toolbar=no width=300 height=200 top=300 left=200");

    window.setTimeout("cc()",10000);

}
window.setTimeout("ok()",5000);

(3)延迟执行,每隔5秒打开三个窗口,打开4次之后停止。

用的是在循环里面调用自己,这种使用方式要注意条件的设置,否则可能会导致窗口一直在打开,最后死机。

var sina,qq,xinhua;
var i=0;
var id;
function cc()
{
    sina.close();
    qq.close();
    xinhua.close();
}
function ok()
{
    sina = window.open("http://www.sina.com.cn","_blank","toolbar=no width=300 height=200 top=100 left=0");
    qq = window.open("http://www.qq.com","_blank","toolbar=no width=300 height=200 top = 100 left=500");
    xinhua = window.open("http://www.xinhuanet.com","_blank","toolbar=no width=300 height=200 top=300 left=200");

    i++;
    if(i >= 4)
    {
        return;
    }
    else
    {
        //window.setTimeout("cc()",10000);
        id = window.setTimeout("ok()",5000);
    }

}
window.setTimeout("ok()",5000);

9:页面操作

window.navigate("url") ;跳转页面;

window.moveTo(x,y); 移动页面

window.resizeTo(宽,高); 调整页面

window.scrollTo(x,y);滚动页面至哪里

(1)例子:用navigate随机打开三个页面中的一个

在body中定义一个div:

<div onclick="r()">单击跳转网页</div>

在Script中添加如下代码:

function r()
{
    var a= parseInt(Math.random()*10000)%3;
    if(a==0)
    {
        window.navigate("http://www.baidu.com");
    }
    else if(a==1)
    {
        window.navigate("http://www.sina.com.cn");
    }
    else
    {
        window.navigate("http://www.qq.com");
    }
}

(2)移动调整页面,移动到窗口的左上角,页面的宽和高都是200:

function m()
{
    window.moveTo(0,0);
    window.resizeTo(200,200);
}

效果如下图:

10:模态对话框

window.showModalDialog("url","向目标对话框传的值","窗口特征参数") 打开模态对话框

模态对话框必须关掉才能对后端操作。 模块对话框和窗口的区别是永远置顶。

特征参数:用分号隔开,像素大小用px。dialogHeight,dialogWidth,center,等

var a = window.dialogArgument:在模态对话框中获得传过来的值,dialogArgument也是一个属性,可以接收。

window.showModelessDialog("url","向目标对话框传的值","窗口特征参数")打开非模块对话框,不用关闭可以操作后面。

(1)例子:打开页面3作为一个模态对话框打开,打开页面3作为一个非模态对话框打开

function openModel()
{
    window.showModalDialog("Untitled-3.html","haha","dialogWidth=300px;dialogHeight=200px;center=yes");
}
function openModeless()
{
    window.showModelessDialog("Untitled-3.html");

}

页面3里面写如下代码,让打开窗口每隔0.5秒滚动到最下端

function s()
{
    window.scrollTo(0,10000);
    window.setTimeout("s()",500);
}
window.setTimeout("s()",500);

打开模态对话框,这个对话框只有关掉才可以操作后面的界面:

打开非模态对话框,不用关掉也可以选中下面的界面,但它还是会置顶:

时间: 2024-10-14 01:06:14

JavaScript(四) Window窗体操作的相关文章

Javascript中window.opener的一点小总结

以前一直认为window.opener只有在window.open方法打开下的窗口才可以访问,没想到即使是a链接打开的页面的照样可以访问.window.opener指向父窗口,也就是来源窗口.可以利用window.opener获取来源页面location.href信息等,也可以操作来源 页面的DOM,十分强大 但下面的情况,window.opener的值为null 1,跨域的情况如果是www.a.com/1.html链接到www.b.com/2.html,这种情况会丢失2,利用的javascri

JavaScript中的字符串操作

JavaScript中的字符串操作 一.概述    字符串在JavaScript中几乎无处不在,在你处理用户的输入数据的时候,在读取或设置DOM对象的属性时,在操作cookie时,当然还有更多....JavaScript的核心部分提供了一组属性和方法用于通用的字符串操作,如分割字符串,改变字符串的大小写,操作子字符串等.    当前的大部分浏览器也能从强大的正则表达式获益,因为它极大地简化了大量的字符串操作任务,不过它也需要你克服一条有些陡峭的学习曲线.在这里,主要是介绍字符串本身的一些操作,正

JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作

基本的window.document操作及实例

基本的window.document操作及实例 找元素 1.根据id找 var d1 = document.getElementById("d1"); alert(d1); 2.根据class找 var d2 = document.getElementsByClassName("d"); alert(d2[1]); 3.根据标签名找 var d3 = document.getElementsByTagName("div"); alert(d3[0

DOM、Window对象操作

一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 一.基本语法: 数据类型(字符串,小数,整数,布尔,时间) var, var s = "3.14"; var n = parseFloat(s); ; s += 5; var d = parseInt(s); isNaN(字符串):判断是否是数字模样的字符串:是-false: 不是-true 运算符:四大类 表达式: function Show() { } 语

数据结构与算法JavaScript (四) 串(BF)

串是由零个或多个字符组成的有限序列,又叫做字符串 串的逻辑结构和线性表很相似的,不同的是串针对是是字符集,所以在操作上与线性表还是有很大区别的.线性表更关注的是单个元素的操作CURD,串则是关注查找子串的位置,替换等操作. 当然不同的高级语言对串的基本操作都有不同的定义方法,但是总的来说操作的本质都是相似的.比如javascrript查找就是indexOf, 去空白就是trim,转化大小写toLowerCase/toUpperCase等等 这里主要讨论下字符串模式匹配的几种经典的算法:BF.BM

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

原文:从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来!

JavaScript数组的某些操作(一)

在软件开发的过程中JavaScript的编程在所难免,其中对数组的操作尤为常见,这里介绍一下和JavaScript数组相关的某些操作: 1.删除并返回数组的第一个元素--shift方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=&quo

JavaScript中的属性操作

JavaScript中的属性操作 一. 原型链 在js中,任何一个对象都有一个prototype属性,在js中记做:_proto_. 比如,我们创建一个对象: <!-- lang: js --> var foo = { x:1, y:2 } 虽然看起来我们只为foo对象创建了两个属性,实际上,它还有一个属性_proto_,如图: 即使我们不定义_proto_,在js中也会预留一个属性. 如果我们定义一个空对象,foo <!-- lang: js --> foo = function