We Keep Coding

Can I "catch" a redirect executed by a script, with javascript eventListeners?

I have an HTML page that includes only a script tag, I don't control the script and I can't change it (so I can't fire my custom event for example).
The script ends with a redirect (using window.location).
Is there a way to add a new script to the page that will listen to the page events and "catch" the redirect (actually it's better for me to catch the new loaded document)?
Something like:
window.addEventListener('redirected', function() {
// do staff
});
(I know there is no "redirected" event, it's just for the example).
It's very important to make it clear that the redirect isn't caused by an anchor click or back/forward button click, so I can't use events like click or popstate.

You might want to look at the onpagehide event or the onunload event, both of which occur when the user navigates away from the page.
However, if you wish to interfere or prevent the redirection itself, onbeforeunload is what you want.

Just take a look at :
unload function w3school or mozilla developper network
beacon function for sending a final XMLHttpRequest

Jquery off() on element that doesn't exist anymore

I have an iframe that content is somehow loaded with ajax, not with content Location. This is WordPress customizer preview iframe. It's something like jquery mobile, the page in iframe flashes and new content is loaded. That said, I can't use load and unload events for this iframe, and I have to bind a click event listener to its contents.
So I came up with an idea to emulate load event. I will add javascript to the page that is loaded in an iframe and it executes iframe parent function when document is ready, the function then can bind the event listener to the new iframe contents.
But how can I unbind it, so I don't get any memory leaks? I tried adding an event listener on unload in the loaded page, but strangely, the unload event runs after the next page is already loaded, so the contents which have an event listener are already gone.
So basically there's no way I can off() the iframe contents before they disappear from the DOM. I have to off() them when they are gone, how can I do that?
Edit:
I think I got it solved. Just store the contents in a variable. It seems like memory is not leaking anymore.
var iframeContents;
this.iframeLoadEmulation = function () {
if (typeof iframeContents !=='undefined') {
console.log('unbinding old content');
iframeContents.off();
iframeContents=null;
}
iframeContents=$('#customize-preview').find('iframe').contents();
iframeContents.on('click', function(){ console.log('click'); });
}
Did I get that right? Is it a good code or is there a better way to do it?

BFcache disabled by unload events (Back-Forward cache)

(Note: FireFox only)
The Back-Forward cache is a caching system in firefox that runs when the back button is clicked. It will then simply use the DOM from the previous page that is in it's cache instead of reloading the entire page (and re-requesting files).
I'm using piwik (an analytics service), that requires a tracking code snippet to be added to the footer. Upon adding this, the back-forward cache no longer works.
It is my understanding that, if there is an unload event (or beforeunload) the bfcache is automatically disabled. This is likely what is happening here.
Is there anything I can add to make the BFCache work anyway?
To make matters worse, I cannot add any custom code below the piwik code. That one is always last.
I added the code displayed below to try and remove any unload events that are registered, but the BFcache is still not working.
$(window).unbind('beforeunload');
$(window).unbind('unload');
window.onbeforeunload = null;
window.onunload = null;
I also tried:
function UnloadHandler() {
window.removeEventListener('unload', UnloadHandler, false);
}
window.addEventListener('unload', UnloadHandler, false);
$(window).unload(function () { $(window).unbind('unload'); });
but this too does not work.
I have placed some samples online. Remember to test this with Firefox:
this one shows a working BFcache (you will get an different alert based on whether or not the back button was clicked)
http://users.telenet.be/prullen/bfcache/a.html
Loaded piwik, BFCache no longer works
http://users.telenet.be/prullen/bfcache/b.html
Loaded piwik, tried to unset onload event, but still not working
http://users.telenet.be/prullen/bfcache/c.html
Using unloadhandler
http://users.telenet.be/prullen/bfcache/d.html
Suggestions by #roasted
http://users.telenet.be/prullen/bfcache/e.html
http://users.telenet.be/prullen/bfcache/f.html
More information about BFCache:
https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching
You can see another demo of the behavior here:
http://www.twmagic.com/misc/cache.html
If you add dom elements, and click the first link, then return - the dom elements are still there. However, if you add an onload or beforeunload event that is not the case. Again, test this in firefox.
Any ideas?

In order to enable BFCache you need to remove beforeunload event listener. It should be the same listener which was added by Piwik code, otherwise removeEventListener will do nothing.
That listener is unreachable outside of the Piwik's source, so one does not simply remove it.
But, if you have a possibility to insert code before the Piwik, you can try to override addEventListener, track added handlers and expose function to remove all tracked handlers at once.

in other element, not working phonegap event api ex) backbutton

document.addEventListener("deviceready", function () {
document.addEventListener("backbutton", function() {
alert("hello");
});
});
it's working
but
var element = $("#score-screen")[0];
element.addEventListener("deviceready", function() {
element.addEventListener("backbutton", function() {
alert("hello");
});
});
score-screen is div id
it's not working..
help me.. please

I think that device ready and BackButton be fired only on the document.
Phonegap documentation: http://docs.phonegap.com/en/2.3.0/cordova_events_events.md.html#deviceready
This is a very important event that every Cordova application should
use.
Cordova consists of two code bases: native and JavaScript. While the
native code is loading, a custom loading image is displayed. However,
JavaScript is only loaded once the DOM loads. This means your web
application could, potentially, call a Cordova JavaScript function
before it is loaded.
The Cordova deviceready event fires once Cordova has fully loaded.
After the device has fired, you can safely make calls to Cordova
function.
Typically, you will want to attach an event listener with
document.addEventListener once the HTML document's DOM has loaded.
This event behaves differently from others in that any event handler
registered after the event has been fired will have its callback
function called immediately.

$(window).load(function() event not firing on Safari Mobile

I need to run some JQuery code after the page completes loading but although it's working on desktop browsers it's not firing the event on Safari Mobile.
This is the code:
$(window).load(function() {
//Alert('event was fired');
});
I'm also using JQuery Mobile ... don't know if it has something to do with the problem.

This script will only fire on the initial page load, as all subsequent page transitions are AJAX based and will not fire a document ready or window load event.
The closest match, given your requirements is the pagechange event, provided by JQM. This fires after page has been loaded into the DOM and the transition animation has completed.
$(document).live('pagechange',function(){
//your logic
});