栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何在不刷新页面的情况下更改页面URL?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何在不刷新页面的情况下更改页面URL?

在HTML5中,您可以更改URL:

window.history.pushState("object or string", "Title", "/new-url");

检查http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-
refreshing-page/

docs:https
:
//developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().c2.a0方法


更新

哪种浏览器支持新的HTML5历史记录API概述:

http://caniuse.com/#search=pushState(caniuse.com值得收藏!)

已经有一些框架可以为您完成艰苦的工作,甚至可以优雅地回退到常见的哈希标签解决方案:

History.js

History.js在所有浏览器中都优雅地支持HTML5历史记录/状态API(pushState,replaceState,onPopState)。包括对数据,标题,replaceState的持续支持。支持jQuery,MooTools和Prototype。对于HTML5浏览器,这意味着您可以直接修改URL,而无需再使用哈希。对于HTML4浏览器,它将恢复为使用旧的onhashchange功能。

Backbone.js

Backbone通过为模型提供键值绑定和自定义事件,具有丰富的可枚举函数API的集合,具有声明性事件处理的视图,并通过RESTful
JSON接口将其全部连接到现有应用程序,从而为重载Javascript的应用程序提供结构。…在Backbone中,pushState支持纯粹是基于选择加入的。不支持pushState的旧版浏览器将继续使用基于哈希的URL片段,并且如果具有pushState的浏览器访问了哈希URL,则将透明地升级为真实URL。

Mootools (通过插件)

MooTools是一个紧凑的,模块化的,面向对象的Javascript框架,专为中高级Javascript开发人员设计。[…]通过popstate或hashchange进行历史记录管理。在不重新加载的情况下替换页面的URL,并在较旧的浏览器上使用Hashchange。

dojo工具包

使用Web标准作为平台,Dojo可以节省您的时间并随着开发过程进行扩展。这是经验丰富的开发人员用来构建高质量桌面和移动Web应用程序的工具包。[…]
dojox.app通过HTML5 pushState标准管理导航历史记录,并将其委托给启用浏览器的历史记录管理。

… 仅举几个。


(!!) 意识到

使用(Backbone文档中的引用)时的一个
重要副作用

pushState

请注意,使用真实的URL要求您的Web服务器能够正确呈现这些页面 ,因此还需要进行后端更改。例如,如果您的路由为/ documents /
100,并且浏览器直接访问该URL,则您的Web服务器必须能够提供该页面。为了获得完全的搜索引擎可爬网性,最好让服务器为页面生成完整的HTML
…但是,如果是Web应用程序,则只需呈现与根URL相同的内容,然后用Backbone填充其余内容即可。视图和Javascript可以正常工作。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/409856.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号