前端学习之BOM编程-window对象、history对象、navigator对象、location对象

作者：小蓝xlanll | 2024-04-11 17:52:41

踩

window对象


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>widnow对象</title>
    <style>
        div{
            width: 2000px;
            height: 4000px;
            background-image: linear-gradient(to bottom right,red,blue);
        }
    </style>
</head>
<body>
    <div>
        <a href="./2.2history对象.html">history对象</a>
    </div>
    <script>
        
        // inner是指浏览器页面展示宽高
        console.log('window.innerWidth',window.innerWidth)
        console.log('window.innerHeight',window.innerHeight)
        // outer是指整个浏览器宽高
        console.log('window.outerWidth',window.outerWidth)
        console.log('window.outerHeight',window.outerHeight)
        // 整个屏幕的宽度
        console.log('screen.availWidth',screen.availWidth)
        console.log('screen.availHeight',screen.availHeight)
        //window.screenLeft或者window.screenX声明了window左上角的x坐标
        console.log('window.screenLeft',window.screenLeft,window.screenX)
        //window.screenTop或者window.screenY声明了window左上角的y坐标
        console.log('window.screenTop',window.screenTop,window.screenY)
        // 将内容滚动道指定坐标
        window.scrollTo(1000,1000)
        // 按照指定的像素值滚动内容
        window.scrollBy(100,100)
    </script>
</body>
</html>

结果

history对象


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history对象</title>
    <style>
        div{
            width: 2000px;
            height: 4000px;
            background-image: linear-gradient(to bottom right,red,blue);
        }
    </style>
</head>
<body>
    <div>
        <!-- 就比如说下面代码用a连接去往下一个网页window对象，然后就可以使用history.forward()返回history对象 -->
        <button onclick="go_last()">返回</button>
        <button onclick="go_next()">下一个</button>
        <a href="./2.1window对象.html">widnow对象</a>
    </div>
    <script>
        
        function go_next(){
            // 返回你上一个浏览的网页
            history.forward()
            // 使用history.go()也可以实现返回或者去往下一个，里面的数字写多少就跳转多少
            // history.go(1)去往下一个
            // history.go(-1)回到上一个
        }
 
        function go_last(){
            // 去往下一个浏览的网页
            history.back()
        }
    </script>
</body>
</html>

结果

下一个

navigatior对象


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>navigator对象</title>
</head>
<body>
    <!-- navigator封装的是浏览器内核信息 -->
    <script>
        console.log('浏览器代码名',navigator.appCodeName)
        console.log('浏览器版本信息',navigator.appVersion)
        console.log('浏览器请求头',navigator.userAgent)
        // 再写了一些前端页面后，这些页面通常会做一个叫做国际化的操作，如果下面显示中文就给他中文页面
        console.log('浏览器语言',navigator.language)
        console.log('浏览器是否启用cookie（cookie保存身份信息）',navigator.cookieEnabled)
        console.log('浏览器操作系统平台',navigator.platform)
        
 
    </script>
</body>
</html>

结果

location对象


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location对象</title>
</head>
<body>
    <!-- location对象包含有关当前url的信息 -->
    <div>
        <button onclick="refresh()">刷新</button>
    </div>
    <script>
 
        function refresh(){
            location.reload()
        }
        // host是port和hostname合起来的东西
        // host返回端口和ip地址
        console.info(location.host)
        console.info(location.hostname)
        console.info(location.port)
        // 协议
        console.log(location.protocol)
        // url地址
        console.log(location.pathname)
        // 文件路径
        console.log(location.href)
        location.href = 'http://www.baidu.com'
        // ？后面的值
        console.log(location.search)
        // #后面的数据
        console.log(location.hash)
        
 
    </script>
</body>
</html>

结果

返回问号的意思是，可能需要浏览器问号后面的值使用那个可以直接获取

不嫌弃的点点关注，点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/406492