【JavaScript】新浪微博ajax请求后改变地址栏url,但页面不跳转的方案解析
JavaScriptAJAX 解析 页面 方案 请求 改变 url
2023-09-11 14:16:42 时间
- 新浪微博当你弹出一个视频的时候再点下一页时,原视频还在,而且地址栏的url的页数变了。
对于这种网上讨论最多的方案有以下几种:
一、通过锚点Hash实现
在这方面其实国内很早就有做了,比如淘宝画报,通过的是在地址栏后面加#锚点实现的,浏览器是可以识别锚点为单位的历史记录的。但不
是说页面本身有这个锚点,锚点的Hash只是起到一个引导浏览器将这次的记录推入历史记录栈顶的作用。
二、通过HTML5加强型的History对象实现(类Pjax)
可以通过window.history.pushState这个方法无刷新的更新浏览器地址栏,这个方法在更新地址栏的同时将地址压入历史记录堆栈里,而要
取出这个栈顶页面则可以用popstate这个事件来捕获。
另外这里要推荐一个jQuery组件叫pjax(https://github.com/defunkt/jquery-pjax),比较牛叉的一个组件,异步的部分load进来另外一个页面对应容器中的内容,实现的机理和我上面的第二种方案一致。pushState + ajax = pjax 感觉这个应用会热起来的。
稍微总结下,两种方案其实对于想IE6或者FF3.6等比较低级的浏览器支持不是很好,前者若要兼容低端浏览器要用轮询来监听浏览器地址栏行为,而后者的话是完全的HTML5应用,对于非HTML5浏览器只能做判断跳转了。
如pjax最后的一段无奈的兼容处理:
Js代码
$.support.pjax = window.history && window.history.pushState
// Fall back to normalcy for older browsers.
if ( !$.support.pjax ) {
$.pjax = function( options ) {
window.location = $.isFunction(options.url) ? options.url() : options.url
}
$.fn.pjax = function() { return this }
}
相关文章
- [转] 为什么javascript是单线程的却能让AJAX异步调用?
- JavaScript 21. 调试
- 【JavaScript 零基础入门】内置对象(二)------ Date 对象
- 【JavaScript】重温Javascript继承机制
- 【JavaScript】Javascript中的函数声明和函数表达式
- 【JavaScript】jQuery Ajax 实例 全解析
- 悟透JavaScript (强烈推荐)
- 使用 JavaScript 实现链表
- 《JavaScript专家编程》——导读
- 《JavaScript精粹(修订版)》——1.3 JavaScript的最佳实践
- 《JavaScript机器人编程指南》——导读
- JS:javascript 函数后面有多个小括号是怎么回事?f( )( )( )...
- 华为OD机试 - 异常的打卡记录(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- JavaScript入门:002—JS代码放置的位置
- 深入理解JavaScript系列(33):设计模式之策略模式
- 【javascript】Javascript中"||"的妙用
- 3 Ways to Preload Images with CSS, JavaScript, or Ajax---reference
- JavaScript DOM事件处理addEventListener(事件添加)removeEventListener(事件移出)兼容低版本IE(attachEvent、detachEvent)
- JavaScript中split方法的使用
- JavaScript高级程序设计学习笔记--变量、作用域和内存问题