对YouTube加载网页的新方式感到好奇
我注意到，当我正在观看video时，我点击标志或相关video，红色进度条（在标志上方）横跨屏幕。 同时有一个轻微的覆盖“灰色”的内容，然后淡入新的一页。 仅供参考，在进度条和转换发生之前，URL会更改为新的URL。
该栏的div ID正在进行中。 看起来像一个很酷的jQuery AJAX负载，但改变页面。 我不知道。
YouTube正在使用HTML5历史loggingAPI将页面url添加到历史logging堆栈并将其移除。 这会导致地址栏中的URL发生更改，并且后退/前进button可以正常工作，但实际上仍然通过JS（ajax）加载页面。
在这一点上实现向后兼容API的最简单方法是使用History.js 。 对于向后兼容，我的意思是回退到旧版浏览器的哈希标记方法，但不支持HTML5历史API。
查看History.js演示！
我认为Twitter可能是使用散列URL的网站最有名的例子。 例如twitter.com/#!/username多年来一直是常见的景象。 这个方法的问题是散列标签是客户端，所以你需要JS来读取它们并提供正确的内容。 任何非JS用户点击一个哈希URL将只登陆Twitter的主页。
顺便说一下， Beatport是第一个使用HTML5 History技术的主要网站之一。 SoundCloud最近也实现了它。 这两个网站都非常需要HTML5历史logging，以确保访问者浏览页面时的audio播放。
Youtube已经开源了他们用于dynamic导航的库spfjs 。
结构化页面片段（或简称为SPF）是一个轻量级JS框架，用于从YouTube快速导航和更新页面。
通过使用渐进式增强function和HTML5，SPF与您的网站集成在一起，通过更新导航过程中更改的页面部分，而不是整个页面，实现更快，更stream畅的用户体验。 SPF提供了发送文档片段的响应格式，用于脚本和样式pipe理的强大系统，内存中caching，即时处理等等。
看这个演示 ，也许可以帮助你，看看评论，有些人说好，而有些人说太复杂了，实现它
HTML：
<div> <dt></dt> <dd></dd> </div>
CSS：
#progress { position: fixed; z-index: 2147483647; top: 0; left: -6px; width: 1%; height: 2px; background: #0088CC; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; -moz-transition: width 500ms ease-out,opacity 400ms linear; -ms-transition: width 500ms ease-out,opacity 400ms linear; -o-transition: width 500ms ease-out,opacity 400ms linear; -webkit-transition: width 500ms ease-out,opacity 400ms linear; transition: width 500ms ease-out,opacity 400ms linear; } #progress dd, #progress dt { position: absolute; top: 0; height: 2px; -moz-box-shadow: #0088CC 1px 0 6px 1px; -ms-box-shadow: #0088CC 1px 0 6px 1px; -webkit-box-shadow: #0088CC 1px 0 6px 1px; box-shadow: #0088CC 1px 0 6px 1px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; } #progress dt { opacity: .6; width: 180px; right: -80px; clip: rect(-6px,90px,14px,-6px); } #progress dd { opacity: .6; width: 20px; right: 0; clip: rect(-6px,22px,14px,10px); }
JS：
$(document).ajaxStart(function() { //only add progress bar if added yet. if ($("#progress").length === 0) { $("body").append($("<div><dt/><dd/></div>").attr("id", "progress")); $("#progress").width((50 + Math.random() * 30) + "%"); } }); $(document).ajaxComplete(function() { //End loading animation $("#progress").width("101%").delay(200).fadeOut(400, function() { $(this).remove(); }); });
