首页 文化 正文

pushstate 编者注：这个pushState

时间：2023-06-03作者：CuMiEqilll11分类：文化浏览：46评论：0

　　编者注：这个pushState()是一个HTML5的新接口，你可能在一些科技博客如36kr上看到过，ajax加载新的文章，并且改变网址却不需要刷新页面，本站也用到了这个，当你在首页往下拉时，加载分页内容，网址也随着改变，有利于后退和增加用户体验。

　　HTML5 的 pushState+Ajax

　　HTML5提供history接口，把URL以state的形式添加或者替换到浏览器中，其实现函数正是 pushState 和 replaceState。

　　pushState 例子

　　pushState() 的基本参数是：

　　window.history.pushState(state, title, url);

　　其中state和title都可以为空，但是推荐不为空，应当创建state来配合popstate监听。

　　例如，我们通过pushState现改变URL而不刷新页面。

　　var state=( {

　　url: ~href, title: ~title, ~additionalKEY: ~additionalVALUE

　　} );

　　window.history.pushState(state, ~title, ~href);

　　其中带有“~”符号的是自定义内容。就可以把这个~href（URL）推送到浏览器的历史里。如果想要改变网页的标题，应该：

　　document.title=~newTitle;

　　注意只是pushState是不能改变网页标题的哦。

　　Demo 演示

　　（实现函数onclick=history.pushState( null, null, '/test-string'); ）。实际上这个博客在文章之间也部署了这个技术。

　　replaceState 同理

　　window.history.replaceState( state, ~title, ~href);

　　pushState、replaceState 的区别

　　pushState()可以创建历史，可以配合popstate事件，而replaceState()则是替换掉当前的URL，不会产生历史。

　　限制因素

　　只能用同域的URL替换，例如你不能用去替换而且state对象不存储不可序列化的对象如DOM。

　　Ajax 配合 pushState 例子

　　现在用Ajax + pushState来提供全新的ajax调用风格。以jQuery为例，为了SEO需要，应该为a标签的onclick添加方法。

　　$("~target a").click(function(evt){

　　evt.preventDefault(); // 阻止默认的跳转操作

　　var uri=$(this).attr('href');

　　var newTitle=ajax_Load(uri); // 你自定义的Ajax加载函数，例如它会返回newTitle

　　document.title=newTitle; // 分配新的页面标题

　　if(history.pushState){

　　var state=({

　　url: uri, title: newTitle

　　});

　　window.history.pushState(state, newTitle, uri);

　　}else{ window.location.href=""+~fakeURI; } // 如果不支持，使用旧的解决方案

　　return false;

　　});

　　function ajax_Load(uri){ ... return newTitle; } // 你自定义的ajax函数，例如它会返回newTitle

　　即可完成pushState。至于新标题newTitle的获取就是另外的问题了，例如你可以为a标签分配data-newtitle=~title属性并届时读取，或者如果你用的$.ajax()函数，可以用$(result).filter("title").text()来获取。

　　另外如果需要对新加载的页面的连接同样使用这个ajax，则需要对新内容的a标签重新部署，例如

　　$("~newContentTarget a").click(function(evt){ ... });

　　pushState 配合 popstate 监听

　　想要良好的支持浏览器的历史前进后退操作，应当部署popstate监听：

　　window.addEventListener('popstate', function(evt){

　　var state=evt.state;

　　var newTitle=ajax_Load(state.url); //你自定义的ajax加载函数，例如它会返回newTitle

　　document.title=newTitle;

　　}, false);

　　提醒，你可以通过setRequestHeader()来让服务器端配合你的ajax请求输出专门的内容。

　　流程图示意

　　这个例子的大致过程如下图所示

　　jQuery + PJAX 插件

　　已经在github上发布，有人把PJAX做成了jQuery插件，方便调用，节省大量代码：

　　if ($.support.pjax) {

　　$(document).on('click', 'a[data-pjax]', function(event) {

　　var container=$(this).closest('[data-pjax-container]')

　　$.pjax.click(event, {container: container})

　　});}

　　谢谢收看，如有不正请指出。

　　参考文章：

　　【使用pushState()改变url而不刷新】相关文章：

　　1.精读JS系列（9b） Promise — 回调地狱、Promise构造器

　　2.记一次JavaScript数组扁平化学习

　　3.javascript代码重构之：写好函数

　　4.前端常用的60多种JavaScript工具方法

　　5.JavaScript中的这些奇妙操作，你都知道吗？

　　6.Vue 3.0 中令人激动的新功能：Portals+新的自定义指令API

　　7.VitePress：Vite & Vue 驱动的静态网站生成器

　　8.Vue 3.0 中令人激动的新功能：Fragment+Suspense+多个v-model

继续浏览有关 的文章

相关文章

猜你喜欢