location对象

最新推荐文章于 2022-03-15 09:57:39 发布

原创最新推荐文章于 2022-03-15 09:57:39 发布 · 233 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js

location对象

5.1 什么是location 对象

Window 对象给我们提供了一个 location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location对象。
在这里插入图片描述

案例：5秒之后跳转页面

1.点击按钮跳转

 btn.addEventListener('click', function() {  
            // console.log(location.href);
            location.href = 'http://www.itcast.cn';
        })

5秒后自动跳转

var timer = 5;
countDown(); //我们先调用一次这个函数，防止第一次刷新页面空白
       
        setInterval(countDown, 1000); //每隔一秒，调用一次 重复
        
        function countDown() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转首页';
                timer--;
            }
        }

5.2 获取URL参数数据

主要练习数据在不同页面中的传递。
login部分：

<body>
    <form action="index(1).html">
        用户名：<input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

index部分：

<script>
        console.log(location.search); //?unmae=andy   获取参数
        // 1.先去掉? substr('起始的位置','截取几个字符');
        var params = location.search.substr(1); //起始位置为1  截取字符没写等于默认从1往后全部截取   uname=andy
        console.log(params);
        // 2.利用=把字符串分隔为数组  split('=');
        var arr = params.split('=');
        console.log(arr); //['uname','andy']
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您'; //arr[1] 表示数组里面第1个字符 是andy 获取过来
    </script>

5.3 location常见的方法：

在这里插入图片描述

<script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史，所以可以实现后退功能
            location.assign('http://www.itcast.cn');
            // 不记录浏览历史，所以不可以实现后退功能
            location.replace('http://www.itcast.cn');
            location.reload(true); //页面加载 相当于刷新/F5 如果参数为true 为强制刷新
        })
    </script>

5.4 navigator对象

使用下面代码，判断用户用PC端打开或者用移动端打开而切换。
在这里插入图片描述

<script>
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            window.location.href = "../H5/index.html"; //手机
        }
    </script>

5.5 history对象

index部分：

<body>
    <a href="list.html">点击我去往列表页</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            history.forward(); //前进
            history.go(1); //前进 go需要加参数
        })
    </script>
</body>

list部分：

<body>
    <a href="index.html">点击我去往首页</a>
    <button>后退</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.back();
            history.go(-1); //后退
        })
    </script>
</body>