前端基础location的使用

概念

获取当前页面的地址信息,还可以修改某些属性,实现页面跳转和刷新等。

 样例展示

window.location 含义.originURL 基础地址,包括协议名、域名和端口号.protocol协议 (http: 或 https:).host域名+端口号.hostname域名.port端口号.pathname路径(以/开头).search查询字符串,以?开头.hash页面锚点,以#开头.href完整 URL

比较容易混淆的是hosthostname这两个属性,区别是前者还包含了端口号。

修改属性值

以上属性除了origin是只读属性,其他都可以修改。修改后的效果就是跳转到相应的新地址。

属性一览表

方法一览表

.assign()导航到指定 URL.replace()导航到指定 URL并删除当前页面的访问记录.reload()重新加载当前页面.toString()返回 URL 字符串

.toString().href都是返回 URL,它们之间有区别吗?结果是一样的,性能上稍微有点差别。通过 JSPerf 上的性能测试结果可以看出,.href稍快,通过window.location拼接字符串的形式速度最慢。

.assign() 和直接修改href是等价的,那么它们跟.replace()的区别是什么呢?

.assign() 在跳转新地址的同时会留下当前页面的访问记录,点击浏览器返回按钮会回到原来的页面,.replace()则不会保留。

场景1:页面跳转锦集

location.href='https://www.baidu.com'
window.open('http://www.baidu.com','_self')
location.assign('http://www.baidu.com')
location.replace('http://www.baidu.com')
<a href="https://www.baidu.com">跳转</a>
  • 页面中跳转固定的地址
function imitateClick(url){let aEle = document.createElement("a");aEle.setAttribute("href", url);aEle.setAttribute("target", "_blank");aEle.setAttribute("id", "previewJumpEle");// 防止重复添加if (!document.getElementById("previewJumpEle")) {document.body.appendChild(aEle);}// 模拟点击aEle.click();(aEle.remove && aEle.remove()) || (aEle.removeNode && aEle.removeNode(true));
};
imitateClick('https://www.baidu.com');

  • js中直接做无感跳转,但是此方法有个弊端:经过验证,有的浏览器可能会拦截,慎用。

<meta http-equiv="refresh" content="5;url=http://www.w3school.com.cn">

场景2:检测协议并提示用户

if (location.protocol == 'http:') {this.$confirm('确定吗?').then(() => {location.href = 'https://www.baidu.com'})}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/241946.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自学SLAM(9)《第五讲:特征点法视觉里程计》作业

文章目录 1.ORB特征点1.1 ORB提取1.2 ORB描述1.3 暴力匹配1.4 最后&#xff0c;请结合实验&#xff0c;回答下⾯⼏个问题 2.从 E 恢复 R&#xff0c;t3.用 G-N 实现 Bundle Adjustment4.* 用 ICP 实现轨迹对齐 1.ORB特征点 1.1 ORB提取 ORB(Oriented FAST and BRIEF) 特征是 S…

计算机视觉基础(10)——深度学习与图像分类

前言 传统视觉算法采用手工设计特征与浅层模型&#xff0c;而手工设计特征依赖于专业知识&#xff0c;且泛化能力差。深度学习的出现改变了这一状况&#xff0c;为视觉问题提供了端到端的解决方案。在之前的课程中&#xff0c;我们已经学习了图像分类的传统知识。在本节课中&am…

c语言:求1/2+2/3+3/4+……n-1/n的和|练习题

一、题目 求1/22/33/4……n-1/n的和 如图&#xff1a; 二、思路分析 1、1/2、2/3、3/4……可以用(i/i1) 2、设置一个函数&#xff0c;求数的相加之和 三、代码截图【带注释】 四、源代码【带注释】 #include <stdio.h> int main() { int num; printf("输入…

javassmmysql医院线上线下全诊疗系统的设计与实现02210-计算机毕业设计项目选题推荐(免费领源码)

目 录 摘要 1 绪论 1.1背景及意义 1.2研究现状 1.3ssm框架介绍 1.4论文结构与章节安排 2 医院线上线下全诊疗系统系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分…

Git常用命令及解释说明

目录 前言1 git config2 git init3 git status4 git add5 git commit6 git reflog7 git log8 git reset结语 前言 Git是一种分布式版本控制系统&#xff0c;广泛用于协作开发和管理项目代码。了解并熟练使用Git的常用命令对于有效地管理项目版本和历史记录至关重要。下面是一些…

springcloud-gateway-2-鉴权

目录 一、跨域安全设置 二、GlobalFilter实现全局的过滤与拦截。 三、GatewayFilter单个服务过滤器 1、原理-官方内置过滤器 2、自定义过滤器-TokenAuthGatewayFilterFactory 3、完善TokenAuthGatewayFilterFactory的功能 4、每一个服务编写一个或多个过滤器&#xff0c…

关于“Python”的核心知识点整理大全39

目录 ​编辑 14.1.5 将 Play 按钮切换到非活动状态 game_functions.py 14.1.6 隐藏光标 game_functions.py game_functions.py 14.2 提高等级 14.2.1 修改速度设置 settings.py settings.py settings.py game_functions.py 14.2.2 重置速度 game_functions.py 1…

饥荒Mod 开发(二一):超大便携背包,超大物品栏,永久保鲜

饥荒Mod 开发(二十)&#xff1a;显示打怪伤害值 源码 游戏中的物品栏容量实在太小了&#xff0c;虽然可以放在箱子里面但是真的很不方便&#xff0c;外出一趟不容易看到东西都不能捡。实在是虐心。 游戏中的食物还有变质机制&#xff0c;时间长了就不能吃了&#xff0c;玩这个游…

【高数定积分求解旋转体体积】 —— (上)高等数学|定积分|柱壳法|学习技巧

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 Shell method Setting up the Integral 例题 Example 1: Example 2: Example 3: Computing…

Linux--shell练习题

1、写一个 bash脚本以输出数字 0 到 100 中 7 的倍数(0 7 14 21...)的命令。 vim /shell/homework1.sh #!/bin/bash for num in {0..100} doif [[ num%7 -eq o ]];thenecho $numfi done执行输出脚本查看输出结果 输出结果&#xff1a; 2、写一个 bash脚本以统计一个文本文件…

LLM之RAG实战(七)| 使用llama_index实现多模态RAG

一、多模态RAG OpenAI开发日上最令人兴奋的发布之一是GPT-4V API&#xff08;https://platform.openai.com/docs/guides/vision&#xff09;的发布。GPT-4V是一个多模态模型&#xff0c;可以接收文本/图像&#xff0c;并可以输出文本响应。最近还有一些其他的多模态模型&#x…

flutter 实战 之 dio小实践

我们要对dio进行封装 class HttpRequest {static Future request(String url,{String method "get",Map<String,dynamic>? params})async{// 创建dio实例BaseOptions baseOptions BaseOptions(baseUrl: base_url,connectTimeout: Duration(seconds: 1));fi…

50 个具有挑战性的概率问题 [04/50]:尝试直至首次成功

一、说明 你好&#xff0c;我最近对与概率相关的问题产生了兴趣。我偶然发现了 Frederick Mosteller 所著的《五十个具有挑战性的概率问题及其解决方案》这本书。我认为创建一个系列来讨论这些可能作为面试问题出现的迷人问题会很有趣。每篇文章仅包含 1 个问题&#xff0c;使其…

【四】【C语言\动态规划】地下城游戏、按摩师、打家劫舍 II,三道题目深度解析

动态规划 动态规划就像是解决问题的一种策略&#xff0c;它可以帮助我们更高效地找到问题的解决方案。这个策略的核心思想就是将问题分解为一系列的小问题&#xff0c;并将每个小问题的解保存起来。这样&#xff0c;当我们需要解决原始问题的时候&#xff0c;我们就可以直接利…

一款超好看流行的HTML随机视频播放背景引导页面源码

前言 今天宋佳乐博客给大家带来一款2024新版视频背景网址导航引导页面源码带背景动态HTML源码 源码介绍 2024新版视频背景网址导航引导页面源码带背景动态HTML源码&#xff0c;非常的炫酷&#xff0c;有需要的自行去体验吧&#xff0c;还是非常不错的 演示地址&#xff1a;点…

《xHCI 1.2》3体系结构概览

3.2 xHCI数据结构 3.2.1 Device Context Base Address Array 3.2.2 Device Context 3.2.3 Slot Context

keystone和beaengine的编译

编译Keystone 根据github的文档编译不出来&#xff0c;所以还是用CMake项目转成Visual Studio的项目来编译 1、下载源码 https://github.com/keystone-engine/keystone clone或者直接下载zip都行 2、CMake创建Visual Studio项目 下载和安装CMake就不细说了&#xff0c;在…

网络7层架构

网络 7 层架构 什么是OSI七层模型&#xff1f; OSI模型用于定义并理解数据从一台计算机转移到另一台计算机&#xff0c;在最基本的形式中&#xff0c;两台计算机通过网线和连接器相互连接&#xff0c;在网卡的帮助下共享数据&#xff0c;形成一个网络&#xff0c;但是一台计算…

正餐---二叉树的OJ题

目录​​​​​​​ 前言&#x1f36f; 1. 检查两颗树是否相同&#x1f947; 1.1 思路分析&#x1fa99; 1.2 代码实现&#x1f9f0; 2. 单值二叉树&#x1f332; 2.1 思路分析&#x1f52e; 2.2 代码实现&#x1f488; 3. 二叉树的前序遍历&#x1f39f;️ 3.1 思路分…

【数据结构】线性表

一.线性表 1.定义&#xff1a; n个同类型数据元素的有限序列&#xff0c;记为 L为表名&#xff0c;i为数据元素在线性表中的位序&#xff0c;n为线性表的表长&#xff0c;n0时称为空表。 2.数据元素之间的关系&#xff1a; 直接前驱和直接后继 3.抽象数据类型线性表的定义…