6.3BOM中其他常见对象

旧城等待， 2023-09-27 13:46 133阅读 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>

![0da7e5394cdb5b8136a471a1e7cfab04.gif][]

![903dd5c7e2858831307c2232527a6a5c.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>

![82041546285855fb04cf8490ade31271.gif][]

![1668e2deb50c908248da89b99270da5b.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>

![d62a3dcb68cb78bb1d45352de3c6830f.gif][]

![e694994d628a1af23624cee00e4559fb.gif][]

[0da7e5394cdb5b8136a471a1e7cfab04.gif]: https://img-blog.csdnimg.cn/img_convert/0da7e5394cdb5b8136a471a1e7cfab04.gif
[903dd5c7e2858831307c2232527a6a5c.gif]: https://img-blog.csdnimg.cn/img_convert/903dd5c7e2858831307c2232527a6a5c.gif
[82041546285855fb04cf8490ade31271.gif]: https://img-blog.csdnimg.cn/img_convert/82041546285855fb04cf8490ade31271.gif
[1668e2deb50c908248da89b99270da5b.gif]: https://img-blog.csdnimg.cn/img_convert/1668e2deb50c908248da89b99270da5b.gif
[d62a3dcb68cb78bb1d45352de3c6830f.gif]: https://img-blog.csdnimg.cn/img_convert/d62a3dcb68cb78bb1d45352de3c6830f.gif
[e694994d628a1af23624cee00e4559fb.gif]: https://img-blog.csdnimg.cn/img_convert/e694994d628a1af23624cee00e4559fb.gif