文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
javascript - Youtube的跳转方式如何做到？
阿神
阿神 2017-04-10 14:29:05
[JavaScript讨论组]
0 3 1388
举报

在首页点击视频后，会跳转到视频页面，但是该页面并无刷新，不是ajax，但是url地址已经变了，也不只是变了hash。那是怎样做到的？点击的时候顶部有进度条。也不是框架？如果更改了herf的值，页面就会整页跳转。那他是怎样做到的？

阿神
阿神

闭关修行中......

全部回复(3)
PHP中文网
PHP中文网2017-04-10 14:31:05 3楼

根据搜索结果，貌似在10年（或许更早，HTML5草案是08年提出的，而草案的前身是在04年提出的...）国外公司就有很多应用了，而...在今天之前，我只知道AJAX...

history API中有几个新特性，分别是history.pushState和history.replaceState，我们把pushState+AJAX进行封装，合起来简单点叫，就是PJAX

pjax是对ajax + pushState的封装，让你可以很方便的使用pushState技术。
http://barretlee.com/history-api-in-html5/

PJAX的基本思路是，用户点击一个链接，通过ajax更新页面变化的部分，然后使用HTML5的pushState修改浏览器的URL地址，这样有效地避免了整个页面的重新加载。如果浏览器不支持history的两个新API或者JS被禁用了，那这个链接就只能跳转并重新刷新整个页面了。和传统的ajax设计稍微不同，ajax通常是从后台获取JSON数据，然后由前端解析渲染，而PJAX请求的是一个在服务器上生成好的HTML碎片

Pjax的操作流程：

1.用ajax加载新内容。
2.用history.pushState将原来的页面加入历史记录。
3.加载完成新页面后，用history.replaceState方法修改当前的url。
4.使用document.title修改当前页的标题。

赞 +0
添加回复
高洛峰
高洛峰2017-04-10 14:31:05 2楼

百度：PJAX

赞 +0
添加回复
阿神
阿神2017-04-10 14:31:05 1楼

ajax取内容
history api改变状态
简称pjax

赞 +0
添加回复
专题推荐
更多>
热门话题
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部