window中location对象改变浏览器URL和位置

电玩女神 2022-01-19 05:53 1093阅读 0赞

`window.location`可以简写为`location`

1.打开一个新的`url`，并在浏览器的历史中生成一条记录：

location.assign('http://www.baidu.com/')
    window.location = 'http://www.baidu.com/'
    location.href = 'http://www.baidu.com/'
    复制代码

2.设置`location`对象的属性可以更改当前页面的`url`，并在浏览器的历史中生成一条记录：

【与HTML5新增的pushState不同的是，pushState也会改变url以及相应历史条目，但pushState不会向服务端发送请求，[History.pushState()][History.pushState]】

假设当前页面的初始`URL`是`http://www.baidu.com/article/`。

//将URL修改为http://www.baidu.com/article/#part1
    location.hash = "#part1";
    复制代码

//将URL修改为http://www.baidu.com/article/?q=baidu
    location.search = "?q=baidu";
    复制代码

//将URL修改为http://www.baidu.com/book/
    location.pathname = "book";
    复制代码

//将URL修改为http://www.google.com/article/
    location.hostname = "www.google.com";
    复制代码

//将URL修改为http://www.baidu.com:8080/article/
    location.port = 8080;
    复制代码

3.`location.replace`改变`URL`，并禁止浏览器后退操作

setTimeout(function(){
    	location.replace('http://www.baidu.com/')
    },3000)
    复制代码

页面重新定向到`http://www.baidu.com/`后，浏览器的后退按钮会处于禁用状态。

4.`location.reload()`重新加载当前页面。

如果调用`location.reload()`时不传递参数，页面会以最有效的方式重新加载，也就是会从浏览器缓存中重新加载。 如果想强制从服务器重新加载，需要传递参数`true`。

location.reload()
    location.reload(true)
    复制代码

转载于:https://juejin.im/post/5cc6effff265da03a33c429c

[History.pushState]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FHistory%2FpushState

发表评论取消回复

表情：

评论列表（有 0 条评论，1093人围观）

还没有评论，来说两句吧...

相关阅读

相关浏览器中的window对象

1. screenLeft/screenTop；IE和Opera中表示文档区到主屏幕的距离，在Chrome,Firefox和Safari中是浏览器到主屏幕的距离 Firefo

缺乏、安全感/ 2023年01月01日 12:59/ 0 赞/ 178 阅读

相关 window.location对象

[window.location对象详解][window.location] window.location.href（当前URL） > 结果如下： > [ht

梦里梦外;/ 2022年12月24日 09:53/ 0 赞/ 182 阅读

相关 window.location对象使用

Location 对象属性 Location 对象包含有关当前 URL 的信息。 Location 对象是 window 对象的一部分，可通过 window.Locat

水深无声/ 2022年10月22日 12:00/ 0 赞/ 160 阅读

相关 window.location.href=document.URL解决window.location.reload()的缺陷

if (window != top) top.location.href = location.href;

妖狐艹你老母/ 2022年08月21日 09:39/ 0 赞/ 180 阅读

相关 js获取url（window.location）

window.location 属性描述 hash 设置或获取 href 属性中在井号“”后面的分段。 host 设置或获取 locati

谁借莪１个温暖的怀抱￠/ 2022年06月09日 00:47/ 0 赞/ 210 阅读

相关用于获取URL—window . location

转载：https://www.cnblogs.com/Arison/p/5286368.html URL即:统一资源定位符 (Uniform Resource Locator

淩亂°似流年/ 2022年05月16日 06:46/ 0 赞/ 285 阅读

相关 Location 对象操作 URL 使用详解

目录 Location 对象属性 href 属性 Location 对象方法 reload() 方法 -------------------- Location

た入场券/ 2022年04月13日 07:40/ 0 赞/ 406 阅读

相关 window中location对象改变浏览器URL和位置

`window.location`可以简写为`location` 1.打开一个新的`url`，并在浏览器的历史中生成一条记录： location.assign('h

电玩女神/ 2022年01月19日 05:53/ 0 赞/ 1094 阅读

相关 JavaScript window.location对象

经常使用window.location，它的结构总是记不住，简单梳理下，方便以后查询。示例 URL：http://b.a.com:88/index.php?name=

╰半夏微凉°/ 2022年01月06日 17:15/ 0 赞/ 314 阅读

相关 window.location对象location.search

一，location对象 ![SouthEast][] 1.location.search在客户端获取Url参数的方法 (1).location.search是从当

拼搏现实的明天。/ 2021年09月14日 14:42/ 0 赞/ 792 阅读