点击刷新时修改路径 html,window.location更改URL属性、重定向或刷新页面!!
本篇文章给大家分享一份window.location备忘单!了解如何更改URL属性以及如何在JavaScript中重定向或刷新页面。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
如果你想获取站点的URL信息,那么window.location对象什么很适合你!使用其属性获取有关当前页面地址的信息,或使用其方法进行某些页面重定向或刷新window.location.origin → '"https://segmentfault.com'
.protocol → 'https:'
.host → 'segmentfault.com'
.hostname → 'segmentfault.com'
.port → ''
.pathname → '/search'
.search → '?q=前端小智'
.hash → '#2'
.href → 'https://segmentfault.com/search?q=前端小智#2'window.location.assign('url')
.replace('url')
.reload()
.toString()
window.location 属性window.location返回值.origin站点主地址(协议 + 主机名 + 端口)
.protocol协议架构 (http: 或者 htts:)
.host域名 + 端口
.port端口
.pathname最前页的 '/' 后面跟的路径
.search? 后跟的查询字符串
.hash从 # 号开始的部分
.href完整网址
host 和 hostname 的区别
在上面的示例中,你可能注意到host和hostname返回相同的值。那么为什么要这些属性。好吧,这与端口号有关,让我们来看看。
没有端口的 URLhttps://segmentfault.com/searchwindow.location.host; // 'segmentfault.com'
window.location.hostname; // 'segmentfault.com'
window.location.port; // ''
带端口的 URLhttps://segmentfault.com/search"8080window.location.host; // 'segmentfault.com:8080'
window.location.hostname; // 'segmentfault.com'
window.location.port; // '8080'
因此,host将包括端口号,而hostname将仅返回主机名。
如何更改 URL 属性
我们不仅可以调用location` 属性来检索URL信息,还可以使用它来设置新属性并更改URL。// 开始 'https://segmentfault.com/'
window.location.pathname = '/tidbits'; // 设置 pathname
// 结果 'https://segmentfault.com/tidbits'
下面是你可以更改的属性的完整列表// 事例
window.location.protocol = 'https'
.host = 'localhost:8080'
.hostname = 'localhost'
.port = '8080'
.pathname = 'path'
.search = 'query string' // (这里不用写 `?`)
.hash = 'hash' // (这里不用写 `#`)
.href = 'url'
唯一不能设置的属性是window.location.origin,此属性是只读的。
Location 对象
window.location返回一个Location对象。它为我们提供有关页面当前地址的信息。但是我们还可以通过几种方式访问Location对象。window.location → Location
window.document.location → Location
document.location → Location
location → Location
我们这样做的原因是这些是我们浏览器中的全局变量。
window.location vs location
上面四个属性都指向同一个Location对象。我个人更喜欢window.location并且实际上会避免使用location。主要是因为location看起来像一个普通变量,并且我们有时可能会不小心将其命名为变量,这将覆盖全局变量。举个例子:// https://www.samanthaming.com
location.protocol; // 'https'
function localFile() {
const location = '/sam';
return location.protocol;
// undefined
// b/c local "location" has override the global variable
}
我想大多数开发人员都知道window是一个全局变量。这样就不太可能引起混淆。老实说,直到我写了这篇文章,我才知道location 是一个全局变量。建议大家多使用 window.location 来代替其它写法。
window.location 方法方法作用.assign()加载一个新的文档
.replace()用新的文档替换当前文档
.reload()重新加载当前页面
.reload()返回的URL
window.location.toString
根据 MDN :此方法返回 URL 的 USVString,它是 Location.href 的只读版本。
换句话说,我们可以这样得到 href 的值:// https://www.samanthaming.com
window.location.href; // https://www.samanthaming.com
window.location.toString(); // https://www.samanthaming.com
assign vs replace
这两种方法都是重定向或导航到另一个URL。区别在于assign 是将当前页面保存在历史记录中,因此用户可以使用“后退”按钮导航到该页面。而使用replace方法时,不会保存它。让我们来看一个例子。
Assign1. 打开一个新的空白页
2. 输入 www.samanthaming.com (当前页)
3. 使用 `window.location.assign('https://www.w3schools.com')` 载入新页面
4. 按 "返回上一页"
5. 返回到了 ???? www.samanthaming.com
Replace1. 打开一个新的空白页
2. 输入 www.samanthaming.com (当前页)
3. 使用 `window.location.assign('https://www.w3schools.com')` 载入新页面
4. 按 "返回上一页"
5. 返回到一个空白页
如何让页面重定向
如何重定向到另一个页面,有3种方法。window.location.href = 'https://www.samanthaming.com';
window.location.assign('https://www.samanthaming.com');
window.location.replace('https://www.samanthaming.com');
replace vs assign vs href
这三个都可以重定向,区别在于浏览器的历史记录。href和assign 会把当前页面保存在历史记录中,而replace则不会。因此,如果你想创建一种导航无法回到原始页面的体验,请使用replace????
现在的问题是href与assign。我更喜欢assign,因为它是一种方法,因此感觉好像我正在执行一些操作。还有一个额外的好处是它更易于测试。我已经编写了许多Jest测试,因此通过使用一种方法,它使其更易于模拟。window.location.assign = jest.fn();
myUrlUpdateFunction();
expect(window.location.assign).toBeCalledWith('http://my.url');
点击刷新时修改路径 html,window.location更改URL属性、重定向或刷新页面!!相关推荐
- window.location获取url各项参数详解
window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法. URL即:统一资源定位符 (Uniform Resource Locator, U ...
- window.location.href url含中文服务器收到乱码问题
window.location.href url含中文服务器收到乱码问题解决 (1).页面中先对中文进行编码. 如:window.location.href = url+"&grou ...
- Html点击按钮时 修改某个标签的 click点击事件
解决的问题:当图片点击时 给另外一个div里面的li标签赋予 点击事件 主要核心代码 $(".delMember").attr('onclick', '').unbind('cli ...
- window.location操作url对象
URL即:统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成:scheme://host:port/path?query#fragment s ...
- window.location.reload() 刷新页面时,如何不弹出提示框
reload时是会弹出刷新的窗口的 改为window.location.href='url'就可以了 技术提供:武汉信息网 娱乐提供:027游戏攻略网 转载于:https://www.cnblogs. ...
- asp.net防止刷新时重复提交
前段时间遇到了需要禁用刷新的需求,f5按钮就不说了,简单的js就能把它禁用,但是工具条上的刷新按钮却傻傻干不掉. 如果简单的在刷新时重新加载画面,通过window.location.href=&quo ...
- vf更改当前路径_这份 window.location 备忘单,让你更有条理解决地址路径问题!...
如果你想获取站点的URL信息,那么window.location对象什么很适合你!使用其属性获取有关当前页面地址的信息,或使用其方法进行某些页面重定向或刷新? https://segmentfault ...
- vue中echarts的点击事件,给当前点击的柱状图修改背景色
最近项目中需要使用到echarts,需要实现点击柱状图时,修改当前点击的柱状图背景色,且没有阴影背景的效果 (如下图) 这样的话,需要给eharts添加click点击事件,直接贴代码: html: & ...
- java接口返回pdf时修改文件名称问题
最近遇到一个问题,java接口返回一个pdf文件,浏览器直接预览,但是预览时显示的文件名称不是在响应头中设置的filename值. 一.问题 未改动代码 测试Controller: @RequestM ...
最新文章
- 金额阿拉伯数字转换为中文大写
- 浅谈PPM (Project Portfolio Management)
- mac mysql的初始密码_MAC版修改MySQL初始密码的方法
- oracle delphi唱盘,经典再升级 Oracle Delphi MK VI Gen 2
- opencv python 生成画布_第16章 坚持一百秒(《Python趣味创意编程》教学视频)
- 可以学计算机再学美术,想学习板绘?教你如何在电脑学习绘画!
- 乐高EV3怎么运行Python?
- [多媒体] 10大开源视频剪辑软件
- 【ARM基础概念:ARMv7架构,ARM(ARM7、ARM9)、Cortex-M4、M7等内核、MCU、MPU、SOC,STM32的一些概念】
- 第13节 IIS之WEB服务器—用于发布网站
- 电子产品销售数据分析及RFM用户价值分析
- 苹果待处理订单要多久_一个订单管理系统帮你轻松应对复杂的生产订单管理
- 极路由添加静态路由表_如何将静态TCP / IP路由添加到Windows路由表
- 修一座安全的广厦,庇护赛博世界的流浪者
- html5 canvas绘制圆形印章,以及与页面交互
- kvm虚拟机添加串口
- 使用NODEJS+REDIS开发一个消息队列以及定时任务处理
- While 循环语句 和do while循环语句
- 慕容话币:币圈投资缺点无处遁形,保持良好的心态有多难?
- IonCube Loaders 在Linux系统中的安装(PHP加密/解密工具)
热门文章
- python实现1/n倍频程计算
- 基于C#开发的《彩色连珠》小游戏
- java 静态区在jvm哪里,JDKJREJVM这三者的联系与区别///java跨平台///堆栈常量区静态区...
- 计算机正确的坐姿教案,幼儿园中班教案《正确坐姿真精神》(通用).doc
- dash dock安装 to_Dash to Dock 安装配置(图文教程)
- SQL语句基础4/select查询语句练习
- u盘装红帽子6.5系统linux,哪位大神会用红帽子6.5版本的linux系统
- 迅捷fw150服务器无响应,Fast迅捷FW150RM无线路由器Client客户端模式怎么设置
- 7-6 jmu-Java-03面向对象-06-继承覆盖综合练习
- lisp 河道水面线计算_美国工程兵团河道水面线计算CAD(HEC-RAS)