Window--Location、navigator、history、screen

最新推荐文章于 2025-09-24 23:05:12 发布

原创最新推荐文章于 2025-09-24 23:05:12 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Location、navigator、history、scr

js 专栏收录该内容

15 篇文章

订阅专栏

本文深入解析JavaScript中的全局对象，如window、Location、navigator等，涵盖了它们的属性与方法，如window.alert、location.href、history.back及screen.width，帮助读者全面理解浏览器环境下JS核心功能。

首先， Location、navigator、history、screen都是在window下的属性。写的时候window可以省略

window 全局对象

window.alert()
window.prompt()
window.innerWidth
window.innerHeight
window.onresize = function(){}
window.onload = function(){}
window.onscroll = function(){}
window.getComputedStyle() -- doc.currentStyle 兼容IE678
window.setInterval()/setTimeout()

...

//在window下定义一个函数
        window.foo = function(){
            //设置页面body为粉色
            document.body.style.backgroundColor = "pink";
        }
        //window.foo()
        foo()

        //在window对象下 定义一个全局变量
        window.aaa = "今天天气不错哦!";
        //忽略window
        console.log(aaa);

        //在window对象添加属性
        window.obj = {}
        //在obj对象添加属性
        window.obj.data = {}
        //在window对象下添加方法
        window.obj.sayhello = function(){}
        //在window对象下添加数组
        window.arr = ['aaa','bbb','ccc']

window.location 获取URL(地址)信息

href
hostname
port
hash
pathname
search ?id=10010
reload()
replace()

...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>location(位置)</title>
    <style>
        li{
            /* width: 300px; */
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #000;
            list-style: none;
        }
        button{
            width: 150px;
            height: 50px;
        }
    </style>
</head>
<body>
    <ul>
        <li>location.href=<span></span></li>
        <li>location.pathname=<span></span></li>
        <li>location.search=<span></span></li>
        <li>location.port=<span></span></li>
        <li>location.origin=<span></span></li>
        <li>location.hostname=<span></span></li>
        <li>location.protocol=<span></span></li>
        <li>location.hash=<span></span></li>

        <button class="btn-refresh">刷新</button>
        <button class="btn-link">跳转</button>
        <button class="btn-replace">替换</button>
    </ul>
    <script>
        //location  提供的API(属性和方法)
        //获取关于地址栏的数据
        //协议 主机 端口
        //http://192.168.73.28:5500

        var texts = document.getElementsByTagName("span")
        texts[0].innerText = decodeURIComponent(location.href);  //当前页面的地址
        texts[1].innerText = decodeURIComponent(location.pathname)  //当前页面的地址
        texts[2].innerText = location.search    //当前页面地址的参数   包括"?"在内的后面字符
        texts[3].innerText = location.port    //端口
        texts[4].innerText = location.origin  //资源(HTML css js img)
        texts[5].innerText = location.hostname  //服务器ip
        texts[6].innerText = location.protocol  //传输协议http(超文本传输协议)
        texts[7].innerText = location.hash  //锚点  # ; 包括#字符在内的后面的所有字符

        //编码
        encodeURIComponent("字符串")
        //解码(解码成中文)
        decodeURIComponent("字符串")
        //
        var aBtn = document.getElementsByTagName("button")
        //1.0 刷新
        aBtn[0].onclick = function(){
            //方法
            location.reload()
        }
        //2.0 跳转页面
        aBtn[1].onclick = function(){
            //方法
            location.href = "https://www.sohu.com";
            //打开页面
            // window.open("https://www.sohu.com");
        }
        //3.0 替换页面
        aBtn[2].onclick = function(){
            //方法
            location.replace("https://www.baidu.com");
        }
    </script>
</body>
</html>

window.history 关于历史信息

history.forword()
history.back()
history.go()

window.navigator

userAgent 判断打开页面的终端(安卓 IOS 电脑)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>navigator</title>
</head>
<body>
    <script>
        //navigator
        // 获取当前浏览器相关数据
        console.log(navigator.userAgent )
        //获取当前设备信息的属性
        console.log(typeof navigator.userAgent )
        //获取打开当前页面的设备信息
        var userAgent = navigator.userAgent;
        //判断userAgent变量(字符串)
        //安卓 Android Q
        if(userAgent.indexOf("Android") > -1){
            console.log("安卓手机浏览器")
            document.body.style.backgroundColor = "red"
        }else
        if(userAgent.indexOf("iPhone") > -1){
            console.log("苹果手机浏览器")
            document.body.style.backgroundColor = "green"
        }else{
            console.log("PC端浏览器")
            document.body.style.backgroundColor = "blue"
        }
    </script>
</body>
</html>

   window.screen 关于客户端屏幕信息

       width height availWidth availHeight

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>screen</title>
</head>
<body>
    <script>
        //screen
        //window.screen
        //关于客户端屏幕信息
        console.log(screen)
        //获取客户端的尺寸
        var width = screen.width;  //客户端屏幕的宽度,px(像素)
        var height = screen.height;  //客户端屏幕的高度,px(像素)
        var availWidth = screen.availWidth;  //客户端屏幕可用的高度(除去任务栏),px(像素)
        var availHeight = screen.availHeight;  //客户端屏幕可用的高度(除去任务栏),px(像素)
        console.log(width,height,availWidth,availHeight)
    </script>
</body>
</html>