如何将音乐播放器保留在页脚中,当我单击子页面的链接时不会重新加载?
我已经尝试解决这个问题有一段时间了,并且浏览了许多论坛来寻找解决方案。这是我的设置。任何帮助将不胜感激!
我目前有一个索引页,在“内容”部分的上方和下方加载 JavaScript 页眉和页脚。我在标题内还有一个导航链接列表。我的音乐播放器位于页脚。它不会自动加载(对于那些对此感到困扰的人),并且我不希望每次有人单击侧面的导航链接之一时它都会重新加载。 我不想为此使用框架;我读过,框架将允许我只刷新页面的“内容”部分,但是在为网站建立索引时,大多数搜索引擎都不能很好地处理具有框架的网站。我也不想为我的音乐使用弹出窗口,因为大多数浏览器和用户都阻止了弹出窗口。
基本上,我正在寻找一个代码或其他东西,允许页眉和页脚(不一定是 JS 页眉和页脚)在有人单击位于我的页眉中的导航链接时不刷新。再次感谢任何能解决这个问题的人。
I have been trying to solve this problem for a while now and have looked on numerous forums to find a solution. Here is my setup. Any help would be greatly appreciated!
I currently have a index page that loads a JavaScript header and footer above and below my "content" section. I also have a list of navigation links inside of the header. My music player is located in the footer. It does not load automatically (for those that are bothered by that), and i don't want it to reload every time someone clicks on one of the navigation links on the side. I don't want to use frames for this; I have read that frames will allow me to only refresh the "content" section of my page, but that when indexing a site, most search engines will not work well with a site that has frames. I also do not want to use a pop-up for my music as most browsers and users have pop-ups blocked.
Basically i am looking for a code or something that will allow for a header and footer (doesn't have to be a JS header and footer) to not refresh when someone clicks on the navigation links located in my header. Thanks again to anyone that has a solution to this problem.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
像 Facebook 一样 - 使用 JavaScript 拦截链接导航,加载使用 XMLHttpResponse 来更新内容,然后更新页面中需要更改的部分。
这可以保持搜索引擎页面的静态完整性,允许大多数网站对于禁用脚本的用户仍然可以正常工作,并避免为其他人重置音乐。
Do it like Facebook - use JavaScript to intercept link navigation, load the content using XMLHttpResponse, and then update the portions of the page that need to change.
This keeps the static integrity of the page for search engines, allows most of the site to still work just fine for users with scripting disabled, and avoids resetting the music for everyone else.
正如 Shog9 所说,但也要确保在更改内容时更改 location.hash,以便使用该哈希访问网站时会将您重定向到正确的页面。
What Shog9 said, but also make sure to change location.hash whenever you change the content and make it so that visiting the website with that hash will redirect you to the correct page.
这是乐队的另一个示例,它使用 AJAX 方法重新加载页面内容,同时保持播放器继续...
http://jonandroy .ca/
每次您点击某个内容时,URL 主题标签都会更新,如果您复制该 URL,当您访问它时,您会看到主页加载一瞬间,然后加载内容主题标签指定的页面。虽然并不完美,但总体上很好地解决了这个古老的问题。
Here's another example of a band that uses the AJAX method to reload the page content, while keeping the player going...
http://jonandroy.ca/
The URL hashtag gets updates each time you click on something, and if you copy that URL, when you visit it, you'll see the homepage load for a split second, and then it loads the content of the page specified by the hashtag. Not perfect, but an overall good solution to this age-old problem.
您可能想了解 thesixtyone.com 的工作原理。他们通过使用 AJAX 在单击链接时重建页面而不是加载新页面来实现不间断的音乐。这是通过让所有链接成为当前页面的锚点来实现的(即所有链接都是相对的并以哈希字符开头)。
You might want to look at how thesixtyone.com works. They have non-interrupted music by using AJAX to rebuild the page when a link is clicked rather than load a new one. This is achieved by having all links be anchors for the current page (i.e. all links are relative and start with a hash character).