Window--Location、navigator、history、screen

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先,  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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值