●DOM—window

DOM（Document Object Model，文档对象模型）

1、window

1、属性（值或子对象）

        window.opener    //打开当前窗口的源窗口。如果是浏览器打开的第一个窗口，则opener为null。
        window.dialogArguments

2、方法（函数）

        alert("警告
 请查错");    //alert（警告），弹出对话框；
是换行。该对话框只有确认按钮。

        confirm("确认？");    //确认对话框。有确认跟取消两个按钮。返回值为true或false。

        var a = prompt("请输入：", "");     //输入的都是字符串型

        window.opener    //打开当前窗口的源窗口。如果是浏览器打开的第一个窗口，则opener为null。
        window.dialogArguments

        window.open("www.baidu.com", "_blank", "toolbar=no menu=yes status=no location=no width=100 height=100 top=300 left=300 resizeable=yes scorllbars=yes");    //第一个是网址；第二个是在新窗口打开（_self,_top）；第三个:去掉工具栏，保留菜单栏，去掉状态栏，去掉地址栏，宽，高，上边距，左边距，窗口大小是否可调，滚动条
        window.close()    //关闭当前窗口
        w.close()    // 关闭变量w中保存的窗口

        id = window.setInterval("要执行的代码", 间隔的时间)    //每隔一定时间执行一次代码
        window.clearInterval(id)    //停止执行setInterval
        id = window.setTimeout("要执行的代码", 延迟的时间)    //一定时间以后执行代码，只执行一次
        window.clearTimeout(id)    //停止执行setTimeout
        window.navigate()    //("目标网址") 跳转到……

        window.moveTo(0, 0)     //移动窗口到（0,0）
        window.resizeTo(width, height)     //调整窗口大小
        window.scrollTo(x, y);     //页面滚动

        window.showModalDialog(url,数据参数，特征参数)      //打开模态对话框(永远置顶)，如果不关闭，则无法操作后端窗口。数据参数：用dialogArguments接收。特征参数（中间用分号隔开，像素大小加px）：dialogHeight,dialogWidth,center,resizable,status,scroll
        window.showModalessDialog(url,数据参数，特征参数)    //打开非模态对话框（永远置顶），如果不关闭，可以操作后端窗口。参数同上。

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>

效果如下图：

 

点击打开窗口，弹出了一个新的窗口，再次点击打开窗口由于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 openW() {
            w[i++] = window.open();
        }

        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);

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

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