网页播放器切换页面时不中断播放有哪些实现方式
其实网页根本没有切换。你看到的切换不过是页面的一个区域重新加载了而已。整体上，这个网站是个“单页面应用”。我分析过网易云音乐的前端框架。他们十分巧妙的利用了location.hash来保存自己的网页地址。使用javascript强制重定向所有的a标签链接。在里面加入“#”。利用浏览器自己的特性来阻止页面跳转。然后整个页面分为两个部分。一个容器用来显示网页。另一个是浮动在上面的音乐播放条。监听location.hash的修改，一旦发现改动，就用ajax加载新的地址，然后在显示网页的那个容器里显示出来。就这么简单。用location.hash的好处是。浏览器会自动记录下hash的改变，不需要你自己去写历史记录，就可以让浏览器自带的“前进”“后退”有效。我用jquery写过一个更简单的版本。hostPrefix = "/admin.php";$(function(){\tloadInit();\tvar isClickLink = false;\t$("a").click(function(){\t\tisClickLink = true;\t\tvar nowHref=https://www.zhihu.com/api/v4/questions/27659644/$(this).attr(/u0026#39;href/u0026#39;);/t/tif(nowHref==/u0026#39;#/u0026#39;){/t/t/tvar addr= hostPrefix + (nowHref.split("#"));\t\t\tloadSection(addr);\t\t}\t});\twindow.onhashchange=function(){\t\tif(isClickLink){\t\t\tisClickLink = false;\t\t}else{\t\t\tloadInit();\t\t}\t}\tif(!(window.onhashchange)){\t\tsetInterval(function(){\t\t\tconsole.log("Refresh Page.");\t\t\tloadInit();\t\t},2000);\t}});function loadInit(){\tif(location.hash.split("#")!=undefined){\t\tvar loadaddr= hostPrefix + location.hash.split("#");\t\tloadSection(loadaddr);\t}}function loadSection(addr){\t$("#content").html("\u0026lt;h1\u0026gt;\u0026lt;center\u0026gt;Loading...\u0026lt;/center\u0026gt;\u0026lt;/h1\u0026gt;");\t$.get(addr, {}, function(data){\t\t$("#content").html(data);\t\tif(data.status==0){\t\t\t$("#content").html("\u0026lt;div class=\\"alert alert-danger\\"\u0026gt;\u0026lt;h3\u0026gt;系统错误\u0026lt;/h3\u0026gt;\u0026lt;p\u0026gt;"+data.info+"\u0026lt;/p\u0026gt;\u0026lt;/div\u0026gt;");\t\t}\t}).error(function(xhr, info, e){\t\t$("#content").html("\u0026lt;div class=\\"alert alert-danger\\"\u0026gt;\u0026lt;h3\u0026gt;系统错误\u0026lt;/h3\u0026gt;\u0026lt;p\u0026gt;"+info+"\u0026lt;/p\u0026gt;\\\t\t\t\u0026lt;p\u0026gt;Ajax调用状态："+xhr.readyState+"\u0026lt;/p\u0026gt;\u0026lt;p\u0026gt;执行状态："+xhr.status+"\u0026lt;/p\u0026gt;\u0026lt;/div\u0026gt;");\t});}
■网友
问题不成立，一直都是那一个网页从来没变过（你在操作的时候见到地址栏有变化吗）实现的方法有很多，例如iframe，ajax
■网友
同一页面，全ajax化
推荐阅读
- PS网页版
- 网页设计和嵌入式哪个发展好一点?
- 汽车|52秒下线一台汽车、1分钟生产线切换 广汽传祺打造自我感知工厂
- 为啥播放器及媒体相关类UI都采用深色系(黑色or灰色)，浅色系为啥不适合用于媒体类的UI
- 火车上能建立wifi吗
- Foxmail、Outlook等邮件客户端，哪个综合体验更好，与网页邮箱相比又怎样
- 1、相同的网址，为啥浏览器http和https都能登录，而爬虫不行\n2、网页下载内容不全
- 为啥我无法保存一个网页的完整html文件
- 能否在网页搜索中加入点赞机制，从而个性化搜索引擎
- 红灯|经常在D档N档之间切换伤车吗？你买的不是车，是“汽油爹”！