Question

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

Answer 1

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();
});