Beatport新界面
Beatports 的新界面解决了我也在寻找解决方案的一个主要问题。
也就是说,它目前保留了一个“播放器”界面,您可以浏览到网站的不同部分(也可以更改网址),而无需重新加载或中断播放器。
我一生都无法理解他们是如何做到这一点的,你们有人能弄清楚吗?!
非常感谢我收到的任何回复
Beatports new interface has solved a major problem I was looking for the solution too.
Namely, it keeps a "player" interface at the moment and you can browser to different parts of the site (also changing the url) without reloading or interrupting the player.
I cannot for the life of me understand how they have done this, can any of you guys figure it out?!
Many thanks for any replies I get
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
看起来他们只是使用 AJAX 来加载新内容,但已经注意使其工作并且看起来非常无缝。您可以通过视觉事件更好地了解哪些事件附加到哪些元素小书签。一旦找到触发事件的代码,您可以通过 JSBeautifier 运行混淆后的 JavaScript 来更仔细地检查它。
具体来说,看起来他们正在向所有锚标记添加点击处理程序,如果通过中键点击触发或使用键盘按键修改事件,则传递该事件,否则将其传递给处理状态和其他特定条件的动态加载器,例如多次点击。它的无缝性来自于它们处理 URL 的方式,使每个页面都可以添加书签和浏览器历史记录,因此后退和前进按钮的工作方式就像您在“正常”网站上所期望的那样。
Looks like they are just using AJAX to load new content but have taken care to make it work and look pretty seamless. You can get better insight into what events are attached to what elements via the Visual Events bookmarklet. Once you find the code that triggers the event, you can run the obfuscated javascript through JSBeautifier to examine it more closely.
Specifically, it looks like they're adding click handlers to all anchor tags, passing off the event if it was triggered with a middle click or modified with a keyboard key, otherwise passing it to a dynamic loader which handles state and other specific conditions like multiple clicks. The seamlessness of it comes from the way they deal with URLs making every page bookmarkable and the browser history so the back and forward buttons work as you would expect on a "normal" site.