How do IHeartRadio and 8Tracks keep the music playing without pause even when you go to a different url without any Pause?
My initial thought was that they would use something like Ajax to load content - but the fact that the browser favicon reloads makes me think it may be something else.
There are questions like this one that ask how is it possible to do so at all - but my question is how do established sites like IHeartRadio.com and 8Tracks.com do this?
If this question is not within StackOverflows scope, please let me know and I will remove it.
They are using ajax obviously.
8Tracks
Screen shot shows a browser loading 8Tracks's About us page. See initiator column (red mark) which is a javascript/xhr which means ajax.
To trigger the default browser is loading event: See:
How to have AJAX trigger the browser's loading indicator
Related
Bit of background in the problem: I am working on a project that loads most of it's content via api calls in JS. The initial page is built in PHP and delivered ready to use, but every interaction/load after that is just done in JS async and pushed to the "content area" of the html. I'm adding QoL so that you can navigate back to where you were using your history/back/forward button, but in order to do that, every time you navigate using those buttons, I would like to force-refresh the page (for various reasons which I don't think are relevant but am happy to describe if requested).
I'm struggling to understand both pushState and pageShow when used in conjunction. As far as I know, I can use pushState to push new entries to the history object every time it's run, like so:
// Update history
var stateObj = {};
history.pushState(stateObj, response.data.title, uri);
That seems to be working when I run that section of code and check my browser history; a nice neat entry sitting there every time I run it. As far as I know, the title isn't actually supported by any browser, but it doesn't hurt to have it.
My issue occurs when I try to use that newly generated history with the back/forward buttons. As far as I can tell doing some google research, typical browser behavior will not actually reload the page when I press the back button. Herein is where I believe my problem occurs. While navigating to any url fresh will load that specific piece of content into the content area, the site is basically a single page application, loading content into the content area async as it needs it. It doesn't actually change pages. I'm not sure, but I think that is the core problem. I have tried to use several events to "catch" the back/forward behavior:
window.onunload
window.onpageshow
$(window).on("pagehide", function() {})
window.addEventListener("pageshow", function(event) {})
I know several of those are basically the same thing, but I was trying to cover my bases. I have looked around for a solution, and I know that window.onunload is SUPPOSED to override the bfcache (not even sure if that is my problem), but it doesn't seem to fire at all, no matter how many times I navigate between the history.pushState entries. I'm not familiar enough with any of these functions to tell where my problem is. What am I doing wrong?
I am making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/
The thing that I want to know is how to create a frame around the site that stays constant and at the same time and change the url in the address bar depending on the actual page being shown. It needs to be able to have an audio element that plays nonstop even if you go to another page on the server.
Pitchfork Website, the player can be seen in the upper righthand corner.
Swapping out content and then updating the URL sounds like a pattern that Mark Pilgrim goes over in http://diveintohtml5.info/history.html
With a little AJAX you can update your content, history.pushState() allows you to change the URL, and then add an event listener to listen to the popstate event (when the user navigates backwards).
This doesn't really give much guidance as to how you should structure your page or AJAX calls but hopefully it gives you an idea of the general concept.
If I understand you, you can include your resource as a template to your site (include it in every page, while taking into account the width and length of your main frame and the resource's size).
I making a tool where a user has to quickly sort throo a heap of websites
to determine weather they are fit for a particular purpose.
I load the websides inside and iframe. All fine here but
some sites have javascript code that makes them pop out of frames.
Now is there a way to prevent that ?
i'v tried onbeforeunload , it worked for a while , but it seems even that isn't working anymore.
No, not really - if website has script like top.location = "mypagehere"; then the other page will load outside the frame, or if it has alert() alert will show up.
The only way around this is using server side language to read the contents of those remote sites then put only the contents, without any scripts, inside your own placeholders.
If you have server side language at your disposal edit your question and put comment here so that we can guide you further.
I am out of my own "ideas" going through this.
I have a album viewer. When you click next I want the adressbar to hang with it, e.g if you start on ?photoid=1, and click next (next picture appends and stuff), and then i want it to say ?photoid=2.
Now I cant make it say ?photoid=2 without changing/manipulating, and this you cant do without HTML5.
I have made a script in HTML5 that works fine, but then I need to take care of those who dont have HTML5(only chrome, ff4 etc supports html5)
Made the script from this( https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history )
I thought of adding #photoid=2 so, ?photoid=1#photoid=2 and then check if theres anything in # then use that instead of the $_GET.. But apparently you cannot do that as # is client side handled and never sent to the server.
So what should I then do?
Any suggestions please to make a workaround this? I checked facebook, what they did to IE users, and I could hear that it "clicked" (the annoying click sound from IE) twice.. the first was to get to the next picture, the second click sound changed the adressbar?!(how?).
And then I also thought hey, html5 is only supported in ff4, and I got ff3.6, and they manipulate the adress bar url when you browse through the album photos, exactly like how I wanted (and what I have written for but it only works in Chrome and ff4..?). How could they do that?
The hash is the only way to change out the url bar without automatically refreshing the page you're on. That's why it's an anchor tag (the hash) historically. Everything else tells your browser to go to a different page. If you don't want it to forward, throw in a hash and then read that hash with javascript and do what you want that way. It's easy with jQuery, or you could dig into Asual's swf address js library or jQuery's Hash Tag Change Listener plugin if you want to use your browsers back/forward button to go through your history states.
I'm not quite sure if understood your quite right, but here's what I came up with for a similar problem.
Why don't you just set the url by editing the location.hash just like you said to make it look something like this: www.mydomain.com/photos/#photoid=2.
Now when somebody calls this url the browser will try to load www.mydomain.com/photos/ and will get the necessary markup but not the photo and what you can do now is read the location.hash (which will return photoid=2) and load the picture via AJAX by sending a request to the server with a path like "www.mydomain.com/photos/" + location.hash