JS-BOM编程

2021-12-22 11:40:55

JS-BOM编程

1.开启和关闭窗口

BOM编程中，window对象是*对象，代表浏览器窗口。

window有open和close两个函数，可以开启窗口和关闭窗口。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>open和close</title>
</head>
<body>
    <!-- 调用open函数，打开窗口 -->
    <input type="button" value="打开百度(默认新窗口)" onclick="window.open('https://www.baidu.com/')">
    <input type="button" value="打开百度(当前窗口)" onclick="window.open('https://www.baidu.com/','_self')">
    <input type="button" value="打开百度(新窗口)" onclick="window.open('https://www.baidu.com/','_blank')">
    <input type="button" value="打开百度(父窗口)" onclick="window.open('https://www.baidu.com/','_parent')">
    <input type="button" value="打开百度(*窗口)" onclick="window.open('https://www.baidu.com/','_top')">
    <input type="button" value="打开本地文件" onclick="window.open('open.html')">
</body>
</html>

被打开的本地文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>open</title>
</head>
<body>
    <p>Hello</p>
    <!-- 调用close函数，关闭当前窗口 -->
    <input type="button" value="关闭窗口" onclick="window.close()">
</body>
</html>

2.弹出消息框和确认框

弹出消息框：window.alert("消息")

弹出确认框：window.confirm("描述信息")

调用完confirm函数后会返回一个值：

如果用户点击的是确认，值为true。
反之值为false。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹出确认框</title>
</head>
<body>
    <script type="text/javascript">
        var del = function() {
            var ok = window.confirm("确认删除吗？");
            if(ok) {
                alert("delete date...");
            }
        }   
    </script>
    <input type="button" value="弹出消息框" onclick="window.alert('消息')"><br>
    <input type="button" value="弹出确认框" onclick="window.del()">
</body>
</html>

3.将当前窗口设为*窗口

当一个用户登录一个网站后，如果长时间不进行操作，登录会超时。

这时，如果用户回来想接着操作，当点击页面时，页面会跳转到登录界面让用户重新登录。

如果没有特殊设置，登录界面会显示在超时页面的工作区，但在工作区显示登录页面会显得比较突兀，

这时，我们就可以将显示在工作区的登录页面设为*窗口。

代码实现：

原*窗口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将当前窗口设为*窗口</title>
</head>
<body>
    <h3>*窗口</h3>
    <!-- 嵌入子窗口 -->
    <iframe src="child-window.html" width="600px" height="300px">
</body>
</html>

子窗口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹出确认框</title>
    <style type="text/css">
        /* 设置子窗口背景颜色 */
        * {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        //如果当前窗口不是*窗口，设置为*窗口
        toTop = function() {
            if(window.top != window.self) {
                window.top.location = window.self.location;
            }
        }
    </script>
    <h3>当前窗口</h3>
    <!-- 点击按钮调用toTop函数 -->
    <input type="button" value="设为*窗口" onclick="toTop()">
</body>
</html>

4.窗口前进和后退

开始窗口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前进和后退</title>
    <style type="text/css">
        /*设置链接字体*/
        a {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- 新页面链接 -->
    <a href="son/new-window.html">new-window</a>
    <!-- 前进 -->
    <input type="button" value="前进" onclick="window.history.go(1)">
</body>
</html>

新窗口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>new-window</title>
</head>
<body>
    <!-- 后退方式1：调用back()函数 -->
    <input type="button" value="后退1" onclick="window.history.back()">
    <!-- 后退方式2：调用go()函数 -->
    <input type="button" value="后退2" onclick="window.history.go(-1)">
</body>
</html>

5.设置地址栏的url

可以通过设置window.location或者document.location对象的href来设置地址栏的url。

window.location对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

document.location也可以获得并设置当前页面的url。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置地址栏的url</title>
    <style type="text/css">
        
    </style>
</head>
<body>
    <script type="text/javascript">
        var toBaidu1 = function() {
            // var locationObj = window.location;
            // locationObj.href = "http://www.baidu.com";
            window.location.href = "http://www.baidu.com";
        }
        var toBaidu2 = function() {
            //可以忽略href
            window.location = "http://www.baidu.com";
        }
        var toBaidu3 = function() {
            //document也可以
            //document.location.href = "http://www.baidu.com";
            document.location = "http://www.baidu.com";
        }
    </script>
    <input type="button" value="百度1" onclick="toBaidu1()">
    <input type="button" value="百度2" onclick="toBaidu2()">
    <input type="button" value="百度3" onclick="toBaidu3()">
</body>
</html>

6.总结

开启和关闭窗口：
- window.open('url')
- window.close()

弹出确认框：

if(window.confirm("是否删除？")) {
    //删除操作
}

将当前窗口设为*窗口：

setTop = function() {
    if(window.top != window.self) {
        window.top.location = window.self.location;
    }
}

窗口前进和后退：
- 前进：window.history.go(1)
- 后退：window.history.back()
设置地址栏url:
1. 表单
2. 直接在地址栏手写url
3. 超链接
4. window.location.href = "url";
5. document.location = "url";
6. window.open("url")
- 以上所有方式都可以携带数据，但只有表单和直接在地址栏手写url是动态的，输入什么数据，就提交什么数据，其他方式都把数据写死了。

码农公寓

JS-BOM编程

1.开启和关闭窗口

2.弹出消息框和确认框

3.将当前窗口设为*窗口

4.窗口前进和后退

5.设置地址栏的url

6.总结

相关文章