location对象

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';
        })
  1. 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>
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值