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)来实现的。

  • 相关阅读:
    XNA中的中文输入(三)
    0.033秒的艺术 测试程序性能
    0.033秒的艺术 List.Sort以及快速排序
    从Demo到Engine(二) Render Queue Sort
    Bounding Volume Performance Test:AABB vs OBB vs Sphere
    0.033秒的艺术 Radix Sort
    从Demo到Engine(一) IRenderable
    0.033秒的艺术 for vs. foreach
    XNA中的中文输入(一)
    0.033秒的艺术 XNA数学库中的陷阱
  • 原文地址:https://www.cnblogs.com/liaoxiaolao/p/9794436.html
Copyright © 2011-2022 走看看