JavaScript - location对象

最新推荐文章于 2024-05-24 00:00:00 发布

学习中的小菜鸟.

最新推荐文章于 2024-05-24 00:00:00 发布

阅读量621

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_33962481/article/details/118226932

版权

JavaScript 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

文章目录

一、什么是location对象
- URL
- URL的一般语法为
二、location对象的属性
三、5秒钟之后跳转页面
四、获取URL参数
五、location常见方法

一、什么是location对象

window对象给我们提供了一个location 属性用于获取或设置窗体的URL. 并且可以用于解析URL.

URL

互联网上的每个文件都有一个唯一的URL, 它包含的信息指出文件的位置以及浏览器应该怎么处理它.

URL的一般语法为

protocol://host[:port]/path/[?query]#fragment
http://www.baidu.com/index.html?name=andy&age=18#link

protocol : 通信协议常用的http, ftp, maito等
host : 主机 (域名)
port : 端口号可选.
path: 路径由零或多个 ‘/’ 符号隔开的字符串, 一般用来表示主机上的一个目录或文件地址
query : 参数, 以键值对的形式, 通过&符号分隔开来
fragment : 片段. #后面的内容

二、location对象的属性

location.href : 获取或者设置整个URl
location.host : 返回主机 (域名)
location.port : 返回端口号
location.pathname : 返回路径
location.search : 返回参数
location.hash : 返回片段

三、5秒钟之后跳转页面

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            window.setTimeout(function () {
                location.href = 'http://www.baidu.com'
            }, 2000)
        })
    </script>
</body>

四、获取URL参数

可以通过location.search参数获取页码的数据.

<body>
    <div>欢迎</div>
    <script>
        var div = document.querySelector("div");
        // 去掉 ? 利用substr
        username = location.search.substring(1);
        // 利用=分割. 键和值.
        username = username.split('=')
        div.innerHTML += username[1];
    </script>
</body>

五、location常见方法

assign()方法

记录历史, 能后退页面

<body>
    <button>重定向</button>
    <script>
        var btn = document.querySelector("button");
        btn.onclick = function () {
            location.assign('http://www.baidu.com');
        }
    </script>
</body>

replace()方法

不能记录历史, 不能后退页面

<body>
    <button>跳转页面</button>
    <script>
        var btn = document.querySelector("button");
        btn.onclick = function () {
            location.replace('http://www.baidu.com');
        }
    </script>
</body>

reload()方法

重新加载页面, 相当于刷新按钮或者f5
如果参数为true, 相当于强制刷新.

<body>
    <button>刷新页面</button>
    <script>
        var btn = document.querySelector("button");
        btn.onclick = function () {
            location.reload();
        }
    </script>
</body>

学习中的小菜鸟.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript - location对象

文章目录一、什么是location对象URLURL的一般语法为二、location对象的属性三、5秒钟之后跳转页面一、什么是location对象window对象给我们提供了一个location 属性用于获取或设置窗体的URL. 并且可以用于解析URL.URL互联网上的每个文件都有一个唯一的URL, 它包含的信息指出文件的位置以及浏览器应该怎么处理它.URL的一般语法为protocol://host[:port]/path/[?query]#fragmenthttp://www.baidu.
复制链接

扫一扫