How to create an iframe that does not refresh during navigation?

Question

I would like to add a playlist to my website: visitors can listen to some sound during their navigation through my website.

I thought to do this by inserting the playlist in an iframe but how to avoid the refresh of the iframe. I don't want that the music restarts again once another page is visited.

Is there a way to achieve this?

Answer 1

Sounds like you're doing something similar to SoundCloud. Then think out of the box.

How about having the page stay in place, and load the new pages onto a container in the current page. That way, you keep the player running, while you "simulate" the navigation. While you're on that, you manipulate the browser's history so that the forward and back buttons still work.

You can use HistoryJS, which is a library that polyfills the History API for older browsers. You can use jQuery for all the AJAX stuff. You can hi-jack all links in the loaded pages to, instead of navigating away from the page, load the pages via AJAX.

// Listen for all link clicks inside the container
$('.container').on('click','a',function(event){

  // Prevent the link from moving the page
  event.preventDefault();

  // This is the location
  var href = this.href;

  // Do AJAX here
  // Manipulate history here

  // Done!
});

---

Now for a simpler approach, why not use a pop-up instead? :D

Answer 2

You can do this if you visitors is go to new page. The current solution - load new pages by "AJAX" and put the record into history by HTLM5 History API. As result - you page is not reload and the music not stop.

Or use multi frame site structure but this is very bad idea.