6.3BOM中其他常见对象

墨蓝 2023-09-27 15:40 60阅读 0赞

location对象

location对象,是window对象的一个属性,代表浏览器上URL地址栏,使用location对象可以操作地址栏

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script>
                            function fun1(){
                                    console.log(location.host);// 服务器的IP+端口号
                                    console.log(location.hostname);// IP 
                                    console.log(location.port);// 端口号
                                    console.log(location.href);// 地址栏中具体的文字
                            
                                    location.href="https://www.baidu.com"
                            }
                            
                    </script>
            </head>
            <body>
                    <input type="button" value="测试location" onclick="fun1()" />
            </body>
    </html>

![8f9403b58f276726bebbb38bfd8a2750.gif][]

![d7b631db9db46fc810f4227246c89bcf.gif][]

history对象

history对象是window对象的一个属性,代表浏览器访问历史记录,通过history的操作我们可以实现翻阅浏览器历史网页

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script>
                            function fun1(){
                                    window.history.forward();
                                    
                            }
                            function fun2(){
                                    history.back();
                            }
                            function fun3(){
                                    history.go(2); // 正整数 向前跳转 * 页  负整数 向后跳转*页
                            }
            
                            
                    </script>
            </head>
            <body>
                    <a href="a.html" target="_self">pageA</a>
                    <input type="button" value="向前" onclick="fun1()"/>
                    <input type="button" value="向后" onclick="fun2()"/>
                    <input type="button" value="go" onclick="fun3()"/>
            </body>
    </html>

![a8c6aa5e7c651c8ee3f51e3802458bc8.gif][]

![f6831c37297be8125b50263ee505a838.gif][]

screen和navigator

screen代表屏幕,navigator代表浏览器软件本身,通过这两个对象可以获得屏幕和浏览器软件的一些信息

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script>
                            function fun1(){
                                    console.info(window.screen.width)
                                    console.info(window.screen.height)
                                    console.info(navigator.userAgent)
                                    console.info(navigator.appName)
                            }
                    </script>
            </head>
            <body onload="fun1()">
            </body>
    </html>

![bc5d4070cc3e34f0b54e424f0401b51f.gif][]

![bcf8c4c21a493a3e1b908453e89dc049.gif][]

[8f9403b58f276726bebbb38bfd8a2750.gif]: https://img-blog.csdnimg.cn/img_convert/8f9403b58f276726bebbb38bfd8a2750.gif
[d7b631db9db46fc810f4227246c89bcf.gif]: https://img-blog.csdnimg.cn/img_convert/d7b631db9db46fc810f4227246c89bcf.gif
[a8c6aa5e7c651c8ee3f51e3802458bc8.gif]: https://img-blog.csdnimg.cn/img_convert/a8c6aa5e7c651c8ee3f51e3802458bc8.gif
[f6831c37297be8125b50263ee505a838.gif]: https://img-blog.csdnimg.cn/img_convert/f6831c37297be8125b50263ee505a838.gif
[bc5d4070cc3e34f0b54e424f0401b51f.gif]: https://img-blog.csdnimg.cn/img_convert/bc5d4070cc3e34f0b54e424f0401b51f.gif
[bcf8c4c21a493a3e1b908453e89dc049.gif]: https://img-blog.csdnimg.cn/img_convert/bcf8c4c21a493a3e1b908453e89dc049.gif