I'm developing an extension that needs to be triggered when a user switched videos on youtube.
I've tried to listen to load or pageshow but they are not triggered when a user is watching a video and clicks another one
var tabs = require("sdk/tabs");
tabs.on('pageshow', function(tab) {
//do something
});
Use a history pushstate listener if you want this to work with any modern webapp that changes the URL without refreshing the page. See my answer here
Related
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.
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();
});
With JQuery Mobile and MVC3 ASP.NET, on an iPad, created a home screen bookmark.
The app pulls up with no problems, it does not show safari's bar.
I login to my app and click a link, THE LINK OPENS SAFARI, NOT INTENDED.
My question is how to prevent the clicked link from opening outside of my bookmarked app?
I've tried:
$(document).bind("pageinit", function () {
$("a").click(function (e) {
e.preventDefault();
$.mobile.changePage($(this).attr('href'));
});
});
The code above seems like it should work based on the docs from jquery mobile.
When I click the link/button the link/button highlights but no error or page load.
Also, another question is why when I leave the app and come back the session dies?
iOS will treat links where you have stipulated data-ajax="false" as a link that should be opened by Safari. I had the same problem in my MVC site that is using jQueryMobile. I found this post very helpful and the following piece of code works very well in my application.
$("a[data-ajax='false']").live("click", function (event) {
if (this.href) {
event.preventDefault();
location.href = this.href;
return false;
}
});
Is this webpage you are linking to being packaged with the app? You need to do so. The app cannot find it and goes out to the browser.
The code itself is fine.
http://jsfiddle.net/m35BU/5/
Session variables are stored on a server...are you talking about a javascript cookie?
If so, unless you set an expiration date for the cookie (mktime()+3600*7 for 7 days) or whatever, it will expire when the app is closed.
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 know there are plenty of plugins can archive this, but I think I want to make a simple one for learning purposes because I have come this far that I can change the url with location.hash when I load an ajax page.
Now I only need to find out - how do I use simply jquery to check there is a fragment on the url when I click back button on the browser?
I came across this simple concept but it works only if I ciick the browser refresh button but not the back button,
$(document).ready(function(){
if(window.location.hash) {
// Fragment exists
var hash = location.hash;
alert(hash);
} else {
// Fragment doesn't exist
}
});
Can you please give me some guide?
Thanks.
You are looking for the hashchange event. But it is not supported the well by older browsers which is why all the plugins exist. Check out the code of Ben Alman's hashchange event plugin to see how it supports all the fun quirks of different browsers:
https://github.com/cowboy/jquery-hashchange/blob/master/jquery.ba-hashchange.js
JQuery has a means of simulating hashchange event for older browsers too - basically it works by polling the URL. You might also want to think about what you want to do with redirects e.g. for authentication) See http://tshrestha.blogspot.com/2013/05/hash-bang-url-fragments-and-http.html