jQuery的，AJAX：做一个页面的一部分（小于DIV＆GT;）的网址导航不刷新 [英] jQuery, AJAX: Make part of a page ( <div> ) not refresh on website navigation

问题描述

我有一个网站，包含歌曲，并且还对底部的MP3播放机。

I have a website that contains songs, and also an .mp3 player on the bottom.

当你点击播放器开始播放歌曲一首歌曲，但是当你尝试导航到该网站，可以说一下专辑，你自然会被重定向到 www.mysite.com/？专辑=测试，因此，这首歌曲将停止播放。

When you click a song the player starts playing the song, but when you try to navigate to the website and lets say clicking an album, you will naturally get redirected to www.mysite.com/?album=test and as a result, the song will stop playing.

我试图让球员（基本＆LT; D​​IV＆GT; 中，玩家在里面）没有重装，每次我点击了＆LT; A HREF＆GT; 或按钮。要清楚，你可以看到 https://soundcloud.com/ 为例。这是我多么希望我的网站的行为等。

I am trying to make the player, (basically the <div> in which the player is inside) no reload, everytime i click an <a href> or a button. To make it clear, you can see https://soundcloud.com/ for example. This is how i want my site to behave like.

现在，如果我使用jQueries每＆LT; A HREF＆GT; ，该页面的URL将保持不变。我不希望发生的。另外我听说内部框架，是一个坏的解决方案。那么，如何 https://soundcloud.com/ 和类似的网站实现什么，我试图做？有人知道如何做到这一点？

Now, if I use jQueries on every <a href>, the URL of the page will remain the same. Which i don't want to happen. Also i heard that iframes, is a bad solution. So, how does https://soundcloud.com/ and similar websites achieve what i am trying to do ? Somebody knows how to do this ?

推荐答案

我看到SoundCloud的工作方式是与AJAX（是的，你可以使用jQuery来做到这一点）。所以，你在技术上保持在同一页上。至于同一URL，你可以实际操作使用的历史API ​​。

The way I see SoundCloud works is with AJAX (and yes, you can use jQuery to do that). So you technically remain on the same page. With regards to the "same URL", you can actually manipulate the history and URL of the browser using the History API.

所以每个导航，你的JS应模拟通过操纵历史，使得浏览器认为它留下的网页离开到另一个页面。 JS的另一个位跟踪URL，称为路由器，知道该怎么做的时候一定URL模式观察。举例来说，如果我在航线 /艺术家/富，则该页面应该AJAX为艺术家富的数据。

So each navigation, your JS should simulate leaving to another page by manipulating history, making the browser think it left the page. Another bit of JS tracks the url, called a router, to know what to do when a certain url pattern is observed. For example, if I am in route /artists/foo, then the page should AJAX in the data for artist "foo".

这篇关于jQuery的，AJAX：做一个页面的一部分（小于DIV＆GT;）的网址导航不刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！