33-JavaScript-DOM-window对象常用方法2-属性

最新推荐文章于 2022-04-27 11:41:14 发布

forwardNow

最新推荐文章于 2022-04-27 11:41:14 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： JavaScript DOM window对象常用方法属性

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/16871743

版权

前端专栏收录该内容

268 篇文章 0 订阅

订阅专栏

- window常用方法2
-
- window属性

1. 方法

1) window.moveTo(x,y)

① 功能

可把窗口的左上角移动到一个指定的坐标。

② 示例(注: 仅IE通过)

<body>
    <input type="button" value="moveTo()" οnclick="toNewPosition()"/>
</body>

<script type="text/javascript">

    function toNewPosition() {
        window.moveTo(300, 300);
    }   

</script>

2) window.moveBy(x,y)

① 功能

可相对窗口的当前坐标把它移动指定的像素。

② 示例(仿 QQ 窗口抖动, IE可通过)

<body>
    <input type="button" value="start" οnclick="remind()"/>
    <input type="button" value="stop" οnclick="stop()"/>
</body>

<script type="text/javascript">

    var interval_id;

    // 仿 QQ 窗口抖动
    function remind() {
       interval_id = window.setInterval(move, 200);
    }   

    function stop() {
        window.clearInterval(interval_id);
    }

    function move() {
        window.moveBy(20, 0);
        window.moveBy(0, 20);
        window.moveBy(-20, 0);
        window.moveBy(0, -20);
    }    
</script>

3) resizeTo()

resizeBy()

① 原窗口的宽=200px 高=300px

resizeTo(100, 100)
现窗口的宽=100px 高=100px

② 原窗口的宽=200px 高=300px

resizeBy(100, 100)
现窗口的宽=200px+100px 高=300px+100px

4) open(url[, name][, features][, replace])

/ close()

① 功能

打开一个新的浏览器窗口或查找一个已命名的窗口
返回该窗口window对象的引用

② 示例

<body>

    <input type="button" value="openNewWindow_1" οnclick="openNewWindow_1()"/>
    <input type="button" value="openNewWindow_2" οnclick="openNewWindow_2()"/>

</body>

<script type="text/javascript">

    function openNewWindow_1() {
        window.open("http://www.baidu.com", "_blank");
        // <==> window.open("http://www.baidu.com");
    }

    function openNewWindow_2() {
        window.open("http://www.baidu.com", "_blank", 
                   "height=500, width=600px, " + // 宽 高
                   "directories=no, " +  // 目录按钮
                   "location=no, " + // 显示地址字段
                   "menubar=no, " + // 显示菜单栏
                   "resizable=no, " + // 可调节尺寸
                   "titlebar=no"
                   );
        
    }    

</script>

2. 属性

1) document

获取window的document对象的引用.
注: window对象可以获得所有 BOM对象的引用.

2) opener

① 功能

返回对创建该窗口的 Window 对象的引用

② 示例-两页面传值

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-9" />

<script type="text/javascript">

    function openNewWindow() {
        var newWindow = window.open("childWindow.html", "_blank");

        // 给新窗口中的文本框赋初值
        newWindow.onload = function() {
          this.document.getElementById("username").value = "123";
        }
    }

</script>


</head>
<body>

    <input type="button" value="openNewWindow" οnclick="openNewWindow()"/>
    <div id="demoDiv">...</div>
</body>

</html>

childWindow.html

<script type="text/javascript">
    
    var parentWindow = window.opener;

    var parentWindowDocument = parentWindow.document;

    var parentWindowDiv = parentWindowDocument.getElementById("demoDiv");

    // 将username放入 父窗口中的div
    function notify() {
        var username = document.getElementById("username").value;
        // parentWindowDiv.innerText = username; // FireFox不支持 innerText
        parentWindowDiv.innerHTML = username;
    }

</script>

<input type="text" id="username">
<input type="button" value="submit" οnclick="notify()">

3. 示例

1) 登陆成功5秒后跳转到主页面

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript">
    
    function $(id) {
        return document.getElementById(id);
    }

    function validateInfo() {
        var username = $("username").value;
        var password = $("password").value;

        if (username == "admin" && password == "123") {
            return true;
        }

        return false;
    }

</script>

</head>
<body>
    <form action="success.html">
        usrename: <input type="text" id="username"><br/>
        password: <input type="text" id="password"><br/>
        <input type="submit" value="submit" οnclick="return validateInfo()">
    </form>
</body>
</html>

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript">
    var msg;
    var count = 5;

    window.onload = function() {
        msg = $("msg");
        window.setInterval(timeCount, 1000);
    }

    function $(id) {
        return document.getElementById(id);
    }

    function timeCount() {
        msg.innerHTML = --count;
        if (0 == count) {
            window.open("manage.html", "_self");
        }
    }

</script>

</head>
<body>
    success!!!!!!!! <span id="msg">5</span> 秒后跳转的管理页面
</body>
</html>

<body>
    <h3>manage page````````````````</h3>
</body>

forwardNow

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
33-JavaScript-DOM-window对象常用方法2-属性

- window常用方法2 - - window属性1. 方法 1) window.moveTo(x,y) ① 功能可把窗口的左上角移动到一个指定的坐标。 ② 示例(注: 仅IE通过) function toNewPosition() { window.moveTo(300, 300
复制链接

扫一扫

专栏目录