如何根据网页内容变换网址但不必重新加载网页？

最新推荐文章于 2023-03-29 17:10:21 发布
最新推荐文章于 2023-03-29 17:10:21 发布
阅读量454 收藏
点赞数
文章标签： seo javascript vue.js html window
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xc0221/article/details/118490536
版权
本文介绍了如何使用JavaScript中的window.history.replaceState和pushState方法在不重新加载网页的情况下改变网址。replaceState用于修改当前历史记录条目的URL，而pushState则会在历史记录中新增一个条目。这两个技巧对于实现页面URL动态更新和浏览历史管理非常有用。
摘要由CSDN通过智能技术生成

如何根据网页内容变换网址但不必重新加载网页？


自从 AJAX问世之后，由于节省带宽、提升网页回应速度的效果显著，被大量采用，甚至发展出了 SPA，但是这样反而出现了一个副作用，就是我们无法将网页最终呈现的结果通过URL分享出去，不利于 SEO，我们就来看一下，怎么在都是用非同步请求获取网页内容的情况下，变换网址。

window.history.replaceState

如果我们想要单纯地转换目前网址列中的网址，可以使用window.history.replaceState() 这个方法，我们可以通过这个方法去改变网址列上的网址，他有三个参数：

  • state object: 是一个跟浏览历史记录有关的JavaScript物件，可以凭借window.history.state去的目前的state object，或是在window.onpopstate的事件中也会取得与触发该事件的相关历史浏览记录的 state object
  • title:用来描述state object的标题
  • URL:历史浏览记录的URL
    在这里插入图片描述

window.history.pushState

window.history.pushState 跟window.history.replaceState()使用方式是一样的，差

最低0.47元/天 解锁文章
厚特儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
虚拟网址转换——实现移动互联网的新技术
Alvan's Blog
12-20 1792
虚拟网址转换（Virtual Network Address Translation,VNAT）技术是应用于动态IP互连的崭新技术。VNAT能使双方在漫游时仍保持连接状态，适用于从个人通信终端到服务器的各种设备，其最大的优点在于不用于现有设备及协议作任何改动。当两个端点（Endpoint）建立连接之后，VNAT用虚拟地址替换物理地址，同时建立从虚拟地址到物理地址的映射。传送层协议看到的只有连接双方
如何在服务器更新网页,如何从服务器获取更新的数据而无需重新加载web2py中的页面...
weixin_39822728的博客
08-03 262
我在web2py应用程序中创建了搜索栏功能，从数据库中获取结果。但是，如果数据库的内容在页面启动时发生更改，则需要重新加载以反映不同的内容。 我的问题是，我可以通过ajax或json或somesuch将数据库的内容读入javascript变量而无需重新加载页面。如何从服务器获取更新的数据而无需重新加载web2py中的页面目前我使用这样的控制器：def testDB():valA=[]valB=[]...
html5跳转页面+不加载数据库,利用HTML5的History API实现无刷新跳转页面初探
weixin_32672471的博客
06-03 291
HTML4中的History APIhistory这个东西大家应该都不陌生，我们经常使用history.back(-1)来实现后退功能，具体的属性和方法如下：属性length 历史的项数。JavaScript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。方法back() 后退，跟按下“后退”键是等效的。forwar...
网络地址转换
凌云工作室
02-24 1898
　　使用过163免费信箱的用户都知道163电子邮局的网址是http://www.163.net，但是如果有一天别人告诉你它的网址是http://3395780883，你可能就会感到莫名其妙了。尽管从域名的有关规定上说，这不是一个合法的网址，但是在Internet上，这确实是一个有效的网址，不信你可以上网试验一下，输入http://3395780883后，它会毫不含糊地把你引向163电子邮局。 　　
打开html自动修改URL,通过html选择更改URL
weixin_34587698的博客
05-31 338
function navigateTo(sel, target, newWindow) {var url = sel.options[sel.selectedIndex].value;if (newWindow) {window.open(url, target, '--- attributes here, see below ---');} else {window[target].locati...
javascript实现的网页标题变换效果(网页游戏广告常用)
10-28
网页标题变换效果是一种常见的网页设计技巧，特别是在网页游戏广告中被广泛应用，用来吸引用户的注意力。这种效果通过JavaScript语言实现，让网页的标题在浏览器的标题栏中交替显示空字符和实际标题，从而产生一种...
SVG网页加载图标特效.zip
最新发布
10-15
在SVG特效中，jQuery通常用来控制SVG元素的显示、隐藏、变换等行为，为网页添加动态交互效果。结合SVG，我们可以创建出高度定制的加载动画，比如旋转的圆环、流动的线条或者动态填充的颜色块。 CSS（Cascading ...
运用JQuery的toggle实现网页加载完成自动弹窗
10-23
在网页开发中，经常需要在页面加载完成时执行某些操作，例如弹出对话框或者显示一个元素。jQuery库提供了一个非常方便的方法来实现这一功能，那就是toggle()方法。toggle()方法可以切换元素的可见状态。换句话说，...
纯css3网页loading预加载动画特效.zip
07-11
在现代网页设计中，用户体验的重要性不言而喻。其中，加载速度和页面过渡效果是直接影响用户第一印象的关键...在实际开发中，可以根据网页的主题和风格选择合适的预加载动画，使用户的等待过程变得有趣且富有吸引力。
关于webview中的网页链接不变，链接内容更新后打开后是最新修改内容
weixin_48227159的博客
03-29 779
如果你想要避免这种缓存，可以在资源的 URL 中添加一个随机参数，这样浏览器就会认为这是一个新的资源，不会使用之前的缓存。在这种情况下，即使你设置了不缓存的响应头，CDN 服务器仍然可能会缓存网页的内容。在这种情况下，即使你设置了不缓存的响应头，代理服务器仍然可能会缓存网页的内容。对于需要频繁访问的数据，可以将其缓存到内存或者缓存服务器上，减少对数据库的访问。在网页的响应头中设置 Cache-Control:no-cache 和 Expires:0，可以让浏览器强制重新加载网页，而不使用之前的缓存。
导航栏不变，切换局部页面的方法
热门推荐
m0_53016870的博客
09-02 2万+
iframe标签、display属性、锚点定位实现导航不变、页面切换效果
HTML页面跳转URL不变（http）
qq_41540361的博客
02-19 4460
新加入的第一篇（http） HTML页面跳转URL不变 有次公司提出这个需求之后，我在网上找了蛮久的，看到通常解决的方法都是加入一个 <iframe>标签，但其还是属于页面里插入另一个页面，后来在一个有年代感的一个页面里找到了一个方法。 <button class="btn" onclick='sendRequest("nav.html");'>按钮</button> function createXMLHttpRequest() { if(window.XML
点击重新开始的html代码,JS 返回上一页并刷新，但不用从新加载整个页面（ajax实现）...
weixin_36155846的博客
06-15 764
需求有三个页面A、B、C，点击A=>B，点击B=>C，在C中添加内容，点击肯定返回到B，此时B页面需从新加载新的内容。再次点击B的返回按钮，但愿返回到A而不是C。ios===== 2017/5/10 更新 ======ajaxIOS 浏览器的诡异表现：history.go(-1)返回上一页后，页面内容并不会刷新。在C页面添加的内容，返回到B时并无更新新的内容，必须手动刷新。json通过...
网页静态文件不重新加载
weixin_30512043的博客
08-12 427
1. 按F12打开我们的网页控制台（或者右键网页点击检查） 　　　　会出现如下图所示：（我们选中Network） 　　　　 2. 勾选上下图两个选项（阻止浏览器自动缓存，我们的静态文件就会实时刷新了） 　　　　 转载于:https://www.cnblogs.com/wangyusu/p/11342994.html...
js 网址修改，页面不变的
小麦先生
12-02 428
varcurrenturl=window.location.href; varnewUrl=(currenturl.split("?"))[0]; console.log(newUrl); history.pushState('','',newUrl+'/abcd/sdfsdf?profile=123');//前两个参数可省略 ...
浏览器可以自动修改URL？
yingfox的专栏
11-10 925
导读： 　　今天，一个同事访问http://www.ibm.com.cn网站时，觉得很奇怪，明明键入的是http://www.ibm.com.cn，怎么IE自动把它变成了http://www.ibm.com/cn/，而且已访问结果也是正确的。他觉得很费解，IE难道有这么智能？ 　　 　　只要了解HTTP协议，以上转换的原理很简单，其过程大致如下： 　　 　　1. 为了从www.ibm.co
制作网页：插入与翻转图像详解
翻转图像通常指的是在鼠标悬停在图像上时，图像内容会自动翻转变换，为用户提供动态的视觉效果。这种技术可以通过网页编辑软件或HTML/CSS代码实现。在描述中提到的步骤，是使用特定软件（如Dreamweaver）来插入翻转...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值