I have a web app in an iframe (Facebook Tab App) on a web page (Facebook).
The web app plays audio and when the user navigates away, usually by clicking on another Facebook link, the page loads another Facebook page and the audio stops.
This works on all browsers except Internet Explorer (IE9). Audio continues to play when I navigate to another Facebook page.
Facebook seems to use the approach where many of their pages are displayed (using hashbang #! approach) without standard page reloading. For me: this means the web app's audio continues to play (the iframe is somehow orphaned?).
The audio stops playing when you navigate to another site that doesn't use the #! URL syntax and the browser properly reloads those pages.
What can I do to ensure the audio stops in my web app (Facebook Tab App) when I navigate to another Facebook page? I'm looking at how to:
Detect an appropriate event in the parent
Explicitly turn off the audio in my web app
I managed to resolve this by hooking onto the unload event on the window, like
$(window).unload(function() {
var a = $("#audio");
a.get(0).pause();
});
Related
I saw this question asked here 18 months ago, but without (a correct) answer: Window like facebook chat
Both Facebook and OkCupid have messaging windows which stay open even when you click to another page on their website. Literally the IM window (and friend list, on Facebook) don't so much as flash or "blink" as if they were reloading quickly. If you refresh the website (F5 or such) then the messages will disappear, at least for a moment.
The only thing I can think of is that the entire website never actually changes addresses, but just pushes the new URLs to your browser so it looks like the URL changed, but you never really left the same file.
How are they offering this persistent chat?
My guess is they are using something similar to qjuery-pjax:
https://github.com/defunkt/jquery-pjax
From their docs:
pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load. But really it's just ajax and pushState.
This means clicking a link on the page will load only part for page and leave the chat windows untouched (no flicker). If you hit F5, the browser is initiating the refresh which will not use ajax/pushState. This causes the chat windows to flicker.
I'm wondering how soundcloud can play music seamlessly when navigating between pages. It's possible that they use Ajax cuz the top bar seems not to reload when navigating but i see the URL changes. Is there any way to load content using Ajax and set the URL to another one?
HTML5 has introduced a new API, called HTML5 History API. You can read about using it here – http://diveintohtml5.info/history.html
This API lets you update browser address bar with JavaScript, so you can change the contents of the page according to the URL. The use of AJAX doesn't really have to do with UI changes, you could check the networks tab in Chrome's developer tools to see that requests are issued with XHR.
If you carefully notice facebook, you will understand that the when you visit one page to another then the whole page is not refreshed or redirected but the URL changes when navigating to new page. It is more clear when chat windows are open, they remains static during page loading. As other website does this by using the # but facebook does not.
There is another example came to me: http://www.davidwalsh.name/. Visit the site and open other pages within their site and you will understand what I mean. Don't forget to notice the URL change.
How they do this?
Added More: I want a way that the page content will be loaded with ajax, change the URL for bookmark feature but when changing URL it should not reload / refresh the page by not using # (hash).
You have two questions:
For the URL change you can put the path instead of the # in the href property of the anchor (e.g /otherlink).
For opening the chat or opening some div does not require to send it in the url, its the onclick event on the div and its expands. Also the chat remains open may be thay set cookie or flag when the chat is first time opened and checking and changing the chat with flag they are setting.
As suggested by #andytuba
For Facebook, Google "hash navigation ajax".
For DavidWalsh, google "history API".
I have a problem:
I want to play a video from a full screen web app, not using html embed, but using an image banner which redirects to the video url (for example url: http://example.com/media/vid.mp4),
because this can't be done using hrefs, i'm just calling a javascript event:
HTML:
<img src='http://example.com/media/banner01.jpg' id='play_video' />
JavaScript:
<script>
$("#play_video").click(function(){
window.location = "http://example.com/media/vid.mp4";
});
</script>
But because it's just an AJAX page, once video finishes playing, the user is back to the 1st page, however, I have a unique url for each page (for social networking), but how can I inject it to the browser's history, or perhaps some other method of playing the video?
I've been through a similar thing recently, and have found jQuery.address to be a great solution. It handles changing the URL in an AJAXy way, lovely.
Of course, if your users are running in standalone full-screen mode, you'll need to implement some controls for navigating the site without the usual browser chrome.
I have to develop an application to monitor Safari activity like all open url , tabs on particular window and loding time of particular url.
I also need to track online streaming that is happening on particular opened htmm page
URL of streaming source, which player is being used for streaming and all other basic information which opened page contains.
I have to develop an application to monitor Safari activity like all open url , tabs on particular window and loding time of particular url.
You can ask Safari for the first two things via AppleScript; the latter is in the Element Inspector, but I'm not sure why you would want it in another application.
I also need to track online streaming that is happening on particular opened htmm page
That's a separate question, so you should post it separately.