BOM操作-2:location地址栏 / hash哈希 / hashchange哈希变化 / href地址 / replace替换 / reload刷新

最新推荐文章于 2024-04-29 23:55:26 发布
最新推荐文章于 2024-04-29 23:55:26 发布
阅读量405 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kino2046/article/details/104886562
版权
本文介绍了BOM（浏览器对象模型）中的location对象，包括host、hostname、href、port、pathname和protocol等属性。重点讨论了hash在路由中的作用，以及hashchange事件监听hash变化。同时提到了href用于获取完整地址，replace方法替换地址栏信息而不记录历史，以及reload方法用于页面刷新。
摘要由CSDN通过智能技术生成

location 地址： 地址栏相关的信息

        host: "127.0.0.1"     主机信息  域名 + 端口

        hostname: "localhost"     主机地址（IP地址） || 域名

        href     完整的地址

        port:     端口

        pathname:     路径

        protocol: "http"||"https"    协议

        #    hash 代表了 # 后边跟随的是hash

        ？  search  代表了 ？后边跟随的内容， form表单中input提交的name值，如?wd=开课吧 (get方式提交过来的数据)

hash # 后边跟随的是hash

        路由（routing）: 根据路径决定前端显示的视图

        hashchange 监听 location 中的 hash 变化

hash路由实现原理

href     

最低0.47元/天 解锁文章
kino2046
关注
专栏目录
K8s（十五）：节点kubeadm join报错 The HTTP call equal to ‘curl -sSL http://localhost:10248/healthz‘
✨ 欢迎来到【Seal ^_^ 的CSDN博客】！这里是我记录技术心得、分享经验的地方。✨
04-10 1万+
🔴 K8s（十五）：节点kubeadm join报错 The HTTP call equal to ‘curl -sSL http://localhost:10248/healthz‘
java: 无法访问org.springframework.boot.SpringApplication 错误的类文件: /C:/Users/xx/.m2/repository/org/spring
快乐学习
03-04 7402
解决java: 无法访问org.springframework.boot.SpringApplication 错误的类文件: /C:/Users//.m2/repository/org/springframework/boot/spring-boot/3.0.4/spring-boot-3.0.4.jar!/org/springframework/boot/SpringApplication.class 类文件具有错误的版本 61.0, 应为 52.0 请删除该文件或确保该文件位于正确的
响应浏览器地址栏#(hash/fragment)变化
世间迷途小书童
10-10 339
Gmail 作为一个经典的 Web 2.0 应用，在带来革命性的邮件管理体验的同时，以其完整、快速的 AJAX 操作方式，深受用户的推崇和技术人员的追捧。 技术上，Gmail 通过将用户的操作以 #op1/op2 这样的形式（即 hash 或 fragment, 这里称之为 hash）反映在浏览器地址栏，最后得到一个类似这样的 URL: https://mail.google.c...
基于 window.location.hash的异步刷新改变地址栏地址（类似于腾讯那个图片分类切换图片的功能）...
weixin_30872789的博客
12-19 183
实现类似功能 功能：点击li标签，地址栏改变，背景变红，输入地址。可以直接将某个li直接改变颜色 <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li...
改变url 页面不刷新 location.hash history.pushState history.replaceState
weixin_42448623的博客
08-24 2374
文章目录URL的hash监听hash变化HTML5的history模式：pushStateHTML5的history模式：replaceState监听变化 URL的hash URL的hash也就是锚点（#），本质就是改变window.location的href属性 可以通过改变 location.hash 来改变href，页面不会刷新 window.location.hash = "xxx" // => /#xxx 监听hash变化 window.onhashchange = function
URL查询，跳转命令search，hash|| replace(url)，assign(url)，.reload()
The limits of your knowledge are the limits of your world
03-29 412
window.location.search 返回值：问号之后的:?number=1&year=2019 url: www.baidu.com/ ?number=1&year=2019 实例: 结果: window.location.hash 返回值：锚点 实例: 结果： window.location.reload()： 刷新页面 window.location.rep...
location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能...
weixin_34320724的博客
04-20 208
在js跨域双向数据传递时可以用iframe加上location.hash来实现，在研究这个的时候深入学习了一下hash的特性。 hash就是uri中#及后面的部分，例如：www.google.com.hk#123的#123。当只有hash部分发生变化时，浏览器的历史记录会产生记录，但不会向服务器发出请求，这时按后退键地址栏的uri会变化但页面内容不变...
E: Problem executing scripts APT::Update::Post-Invoke-Success 'if /usr/bin/test -w /var/cache/app-in
weixin_45565155的博客
02-08 7605
Ubuntu 16.04 出现 E: Problem executing scripts APT::Update::Post-Invoke-Success 'if /usr/bin/test -w /var/cache/app-info -a -e /usr/bin/appstreamcli; then appstreamcli refresh > /dev/null; fi’ 查找了一下解...
C/C++ 哈希hash算法详解及源码
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
04-29 7588
哈希算法的原理是在给定的输入上应用一个特定的算法，该算法将输入转换为一个固定长度的哈希值。总结：哈希算法是一种将任意大小的数据映射到固定大小的数据的方法。它具有快速计算、唯一性和固定长度的优点，但也存在哈希冲突和不可逆性的缺点。可以使用C语言实现一个简单的哈希算法程序，并注意其使用方法和注意事项。哈希算法（Hash Algorithm）是一种将任意大小的数据映射到固定大小的数据的方法。这个简单的哈希算法使用了一个循环来遍历输入字符串的每个字符，并将其累加到哈希值上。最后，返回计算得到的哈希值。
【知识整理】利用history.replaceState及location.hash记录滚动条位置
qq_19891827的博客
04-07 2111
最近有用户反映公司官网微信端页面在体验上的小问题：当当前页面刷新或者跳转到另一个页面又退回到当前页面后无法还原之前查看内容的位置，而是要从头拉动滚动条寻找之前看到的位置，用户觉得很麻烦。于是这个问题就落到了我的头上. 我的思路是这样的：当用户离开当前页面时记录当前页面的滚动条位置，当用户重新加载这个页面时取出记录的滚动条位置，通过js设置到页面上就可以了。这看似很简单啊，灵光一闪想到了2个解决办
去除vue路由跳转地址栏后的哈希值#
weixin_30628077的博客
04-27 321
去除vue路由跳转地址栏后的哈希值#，我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希值# mode:"history" import Vue from 'vue' import App from './App.vue' // 全局导入样式【每个组件都可以用】 import "./statics/site/css/s...
BOM中的hash
文字的博客
05-20 329
hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）例如：一个URL为：file:///D:/%E5%A6%99%E5%91%B3%E8%AF%BE%E5%A0%82/%E8%AF%BE%E5%A0%82%E6%A1%88%E4%BE%8B/hash.html#div3，则它的hash值为：#div3利用hash值可以完成一些内容信息的切换：获取方式：wind...
Location hash 属性
HuangsTing的博客
04-08 557
hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。 实例 返回一个 URL 的主要部分。假设当前的 URL 是 http://www.runoob.com/test.htm＃PART2 document.write(location.hash); 以上实例输出结果： #part2 ...
hashchange事件
weixin_30375247的博客
01-22 82
用户状态管理 history.pushState()方法接收三个参数： 1）状态对象 2）新状态的标题 3）可选的相对URL history.replaceState()方法接收三个参数： 1）状态对象 2）新状态的标题 转载于:https://www.cnblogs.com/xyn0909/p/8330230.html...
JS 检测 url 变化事件
热门推荐
ting119的博客
07-04 1万+
window.onload=function(e){ console..log(window.location); }检测窗口变化事件，当窗口 url 发生变化，随时输出最新的 url。onhashchange 事件检测 url 值得变化，&lt;body onhashchange="myFunction()"&gt; &lt;p&gt;点击按钮修改当前 URL 的锚部分为 #part5&l...
window.location.hash 使用说明
weixin_30763397的博客
01-06 707
本文给大家详细汇总了关于window.location.hash的知识点，属性以及用法等等，非常的实用，并附上了例子，有需要的小伙伴可以参考下。 location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。...
学习笔记：location.hash和history.pushState()
weixin_30247307的博客
08-12 415
在浏览器中改变地址栏url，将会触发页面资源的重新加载，这使得我们可以在不同的页面间进行跳转，得以浏览不同的内容。但随着单页应用的增多，越来越多的网站采用ajax来加载资源。因为异步加载的特性，地址栏上的资源路径没有被改变，随之而来的问题就是页面的状态无法被保存。这导致我们难以通过熟悉的方式（点击浏览器前进/后退按钮），在前后的页面状态间进行切换。 为了解决ajax页面状态不能返回的问...
javascript学习记录：location.hash的用法和说明
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
03-29 1565
对象的一个属性，它返回 URL 的 hash 部分（从 ‘#’ 符号开始的部分）。这个属性常常用于单页面应用（SPA, Single Page Application）中，通过改变 URL 的 hash 来模拟页面跳转，同时不触发页面重载。在某些情况下很有用，但它也有一些限制。例如，它可能不适用于所有类型的导航，特别是在需要服务器参与的情况下。，并且浏览器会尝试滚动到 id 为 “section2” 的元素。还是其他导航方法时，应考虑到这些限制和用例的具体需求。此时，URL 会变为。
vue中hash模式下锚点多页面跳转
m0_58959716的博客
09-06 600
1.目标页面设置锚点及跳转事件 <pid="demoAnchor">直播时间：2021年10月20日</p> methods：{ open(){ window.location.href='#demoAnchor'; } }, mounted(){ if(this.$route.query.active){ this.open(); } 2.准备跳转页面，设置跳转，...
BLS12-381签名库：C/C++高性能安全实现
3.IETF规范草案：这个库符合IETF的BLS签名V2和Hash-to-Curve V8规范草案。这意味着它遵循了业界的标准，可以与现有的系统和服务兼容。 4.支持x86_64和ARM64：这个库支持x86_64和ARM64架构，这意味着它可以运行在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值