zoukankan      html  css  js  c++  java
  • 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);

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

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

  • 相关阅读:
    centos7下安装Jdk8、Tomcat8
    CentOS7.3下使用YUM安装MySQL5.6
    数据库表直接生成Excel
    分页工具类
    ResponseUtil
    图片上传
    UUIDUtils
    html和js
    java
    Eclipse启动发生的错误An internal error occurred during: "Initializing Java Tooling".
  • 原文地址:https://www.cnblogs.com/18553325o9o/p/4681548.html
Copyright © 2011-2022 走看看