location、navigation、history对象

WangZhang_521

已于 2022-03-16 15:08:05 修改

阅读量627

点赞数

分类专栏： Web API 文章标签： javascript 前端 html

于 2022-03-16 15:06:58 首次发布

本文链接：https://blog.youkuaiyun.com/WangZhang_521/article/details/123525935

版权

这篇博客探讨了JavaScript中的location、navigation和history对象在前端开发中的应用，包括五秒后跳转页面的案例、URL参数的获取、location的常见方法以及history对象的使用。同时，提到了在H5和PC端的CSS布局及样式文件的组织结构。

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

01-五秒后跳转页面案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五秒后跳转页面案例</title>
    <!--1.利用定时器做倒计时效果  -->
    <!-- 时间到了，就跳转页面，使用location.href -->
</head>

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');

        btn.addEventListener('click', function() {
    
            // console.log(location.href);
            location.href = 'http://www.itcast.cn';
        })
        var timer = 5;
        setInterval(function() {
    
            if (timer == 0) {
    
                location.href = 'http://www.itcast.cn';
            } else {
    
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }
        }, 1000)
    </script>
</body>

</html>

02-获取URL参数

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script>
        console.log(location.search); //  ?uname=ANDY
        // 1.先把?去掉 substr('起始的位置','截取几个字符');   截取几个字符不写默认是从起始位置开始一直到结束
        var params = location.search.substr(1);
        console.log(params); //检测输出的值是否是想要的 uname=ANDY
        // 2.利用=把字符串分割为数组 split('=')
        var arr = params.split('=');
        console.log(arr); // ['uname', 'ANDY']
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎你';
    </script>
</body>

</html>

login.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

03-location常见的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
    
            // location.assign()  记录浏览历史，所以可以实现后退功能
            // console.log(location.assign('http://www.itcast.cn'));

            // location.replace()   不记录浏览历史，所以不可以实现后退功能
            //console.log(location.replace('http://www.itcast.cn'));

            // location.reload 刷新页面 如果参数为true,为强制刷新，相当于ctrl+f5
            console.log(location.reload('http://www.itcast.cn'));

        })
    </script>
</body>

</html>

04-history对象

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="list.html">点击我去往列表页</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
    
            // history.forward(); //相当于点击了前进按钮
            history.go(1); //前进一步
        })
    </script>
</body>

</html>

list.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<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>

</html>

05-navigator对象

H5

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入我们的css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入我们首页的css -->
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

<body>
    <!-- 顶部 -->
    <header class="app">
        <ul>
            <li>
                <img src="images/close.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
    <!-- 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
            <div class="sou"></div>
        </div>
        <div class="search-login">登陆</div>
    </div>
    <!-- 主体内容部分 -->
    <div class="main-content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="upload/banner.dpg" alt="">
        </div>

        <!-- 小家电品牌日 -->
        <div class="brand">
            <div>
                <a href="#">
                    <img src="upload/pic11.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/pic22.dpg" alt="">
                </a>

            </div>
            <div>
                <a href="#">
                    <img src="upload/pic33.dpg" alt="">
                </a>

            </div>
        </div>
        <!-- nav部分 -->
        <nav class="clearfix">
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav2.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav3.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

        </nav>
        <!-- 新闻模块 -->
        <div class="news">
            <a href="#">
                <img src="upload/new1.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new2.dpg" alt="">

            </a>
            <a href="#">
                <img src="upload/new3.dpg" alt="">

            </a>
        </div>
    </div>
</body>

</html>

效果展示

在这里插入图片描述

CSS

index.css

body {
   
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}


/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

* {
   
    -webkit-tap-highlight-color: transparent;
}


/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/

input {
   
    -webkit-appearance: none;
}


/*禁用长按页面时的弹出菜单*/

img,
a {
   
    -webkit-touch-callout: none;
}

a {
   
    color: #666;
    text-decoration: none;
}

ul {
   
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
   
    vertical-align: middle;
}

div {
   
    /* css3 盒子模型 */
    box-sizing: border-box;
}

.clearfix:after {
   
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}

.app {
   
    height: 45px;
}

.app ul li {
   
    float: left;
    height: 45px;
    line-height: 45px;
    background-color: #333333;
    text-align: center;
    color: #fff;
}

.app ul li:nth-child(1) {
   
    width: 8%;
}

.app ul li:nth-child(1) img {
   
    width: 10px;
}

.app ul li:nth-child(2) {
   
    width: 10%;
}

.app ul li:nth-child(2) img {
   
    width: 30px;
    vertical-align: middle;
}

.app ul li:nth-child(3) {
   
    width: 57%;
}

.app ul li:nth-child(4) {
   
    width: 25%;
    background-color: #F63515;
}


/* 搜索 */

.search-wrap {
   
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 44px;
    min-width: 320px;
    max-width: 640px;
}

.search-btn {
   
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
}

.search-btn::before {
   
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}

.search-login {
   
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    color: #fff;
    line-height: 44px;
}

.search {
   
    position: relative;
    height: 30px;
    background-color: #fff;
    margin: 0 50px;
    border-radius: 15px;
    margin-top: 7px;
}

.jd-icon {
   
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
}

.jd-icon::after {
   
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}

.sou {
   
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px auto;
}

.slider img {
   
    width: 100%;
}


/* 品牌日 */

.brand {
   
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.brand div {
   
    float: left;
    width: 33.33%;
}

.brand div img {
   
    width: 100%;
}


/* nav */

nav {
   
    padding-top: 5px;
}

nav a {
   
    float: left;
    width: 20%;
    text-align: center;
}

nav a img {
   
    width: 40px;
    margin: 10px 0;
}

nav a span {
   
    display: block;
}


/* news */

.news {
   
    margin-top: 20px;
}

.news img

最低0.47元/天解锁文章