zoukankan      html  css  js  c++  java
  • window对象

    moveTo移动到指定位置。

    (1)moveTo() moveBy()

    案例:

    window.moveTo(100,100);//这个是相对屏幕的左上角移动

    window.moveBy(100,100);//当前这个窗口的左上角(窗口的移动位置参照是原先窗口的左上角)。

    (2)resizeTo() resizeBy()

    resizeTo(100,100);//把窗口调整到100,100

    resizeBy(100,100);//把窗口再增加100,100.

    (3)开辟一个新窗口。

    window.open(url,name,featrues,replace)

    window.open("newWindow.html","_self");//替换原窗口

    window.open("newWindow.html","_black");//在新窗口打开

    window.open("newWindow.html","_blank","channelmode=yes,resizable=no,location=no");
    window.open("newWindow.html","_blank","width=200,height=100,location=no");

    这段代码打开一个新窗口,在IE中打开是固定大小,在谷歌浏览器中打开时窗口大小可以进行调整。

    (8)opener

    父窗口和子窗口通信

    opener。

    子窗口改变父窗口的值。

    父窗口

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script language="javascript" type="text/javascript">
    var newWindow;
    function test2(){
    //newWindow其实就是指向新窗口的引用
    newWindow=window.open("newWindow.html","_blank","width=1000,height=800");
    }

    function test3(){
    newWindow.document.getElementById("info").value=$("info2").value;
    }
    function $(id){
    return document.getElementById(id);
    }

    </script>
    </head>
    <body>
    我是一个窗口
    <input type="button" value="打开新窗口" onclick="test2()"/>
    <span id="myspan">消息</span>
    <input type="text" id="info2"/>
    <input type="button" value="通知子窗口" onclick="test3()"/>
    </body>
    </html>

    子窗口

    <!DOCTYPE html>
    <html>
    <head>
    <meta content="charset=utf-8">
    <title>Document</title>
    <script language="javascript" type="text/javascript">
    function notify(){
    var val=document.getElementById("info").value;
    window.alert(val);
    opener.document.getElementById("myspan").innerText=val;
    }
    </script>

    </head>
    <body>
    <span>new Window</span>
    <input type="text" id="info"/>
    <input type="button" value="通知父窗口" onclick="notify()"/>
    </body>
    </html>

    上述两端代码在IE浏览器中运行是没有问题的,但是在谷歌浏览器中却是会出bug.

    利用opener可以对父窗口进行刷新(比如在子窗口编辑,然后自动在父窗口刷新)。

    用户登录成功后(数秒)跳转到另外一个页面。

     案例:

    login.html

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <script language="javascript" type="text/javascript">
        function checkuser(){
            if($("uname")=="shunping"&&$("pwd"=="123"){
                //window.alert("ok");
                return true;
            }else{
                //window.alert("no ok");
                return false;
            }
        }
        function $(id){
            //return document.getElementById(id).value;
            //之前使用了下面这句话是错的,后来莫名其妙就对了,但是上面这句话肯定是没有错的
            return document.getElementById(id);
        }
        </script>
    
    </head> 
    <body>
        <form action="ok.html">
            username:<input type="text" id="uname"/><br/>
        password:<input type="password" id="pwd"/><br/>
        <input type="submit" value="登录" onclick="return checkuser()" />
        </form>
    </body>
    </html>

    在input中输入密码后,对账号密码进行验证,如果成功的话就跳转到欢迎界面。

    ok.html

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <script language="javascript" type="text/javascript">
            function tiao(){
                clearInterval(mytime);
                window.open("manage.html","_self");
            }
            setTimeout("tiao()",5000);
            function changeSec(){
                $("myspan").innerText=parseInt($("myspan").innerText)-1;
            }
            var mytime=setInterval("changeSec()",1000);
            function $(id){
                return document.getElementById(id);
            }
        </script>
    
    </head>
    <body>
        <h1>恭喜登录成功</h1>
        登录<span id="myspan">5</span>秒后自动跳转到管理页面
    </body>
    </html>

    在ok.html中,显示登录5后进行跳转,5秒后跳转是用setTimeout("tiao()",5000)实现的,而5秒渐变是用setInterval("changeSec()",1000)来实现的。

  • 相关阅读:
    Dapper 关于类型转换及返回
    Lombok中关于@Data的使用
    java xml中sql处理大于号与小于号
    sqlserver DATEDIFF查询当天/本周/本月/本季度/本年的数据
    idea EasyCode代码生成器插件使用
    sql server 一对多只取第一条 row_number() over (partition by XX order by YY )
    C# 单元测试案例
    C#.字符串转数组,数组转字符串
    关于c#:使用Clipboard.SetText(string)复制空字符串
    progressBarControl 和 backgroundWorker 同时使用方法
  • 原文地址:https://www.cnblogs.com/liaoxiaolao/p/9794436.html
Copyright © 2011-2022 走看看