I want to run some JS in a webpage so I can click elements that will take me to another webpage and do 2 things:
- Get the destination URL.
- Stop the redirection.
So far I read about adding an event listener to stop redirection:
window.addEventListener('beforeunload', function (e) {
// Cancel the event
e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
// Chrome requires returnValue to be set
e.returnValue = '';
});
but there’s always a popup and I cannot figure out the destination address.
Edit:
I was able to obtain the destination URL from the microservice by intercepting the XMLHttpRequests so the first problem is solved … redirection is still an issue.
const xhrOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
if (method === "GET") {
const urlQuery = "some_discrimination_factor";
const urlPropertyName = "redirection_url";
if(url.endsWith(urlPropertyName)) {
this.onload = function(){
const response = JSON.parse(this.responseText);
if (response.hasOwnProperty(urlPropertyName)) {
console.log(response[urlPropertyName]);
}
};
}
}
xhrOpen.call(this, method, url, async, user, pass);
};
Here’s the same thing but using DOM Level 2 Events:
let xhrListener; //use only to avoid multiple listeners error while debugging
const xhrOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
if (method === "GET") {
const urlQuery = "some_discrimination_factor";
const urlPropertyName = "redirection_url";
if(url.endsWith(urlPropertyName)) {
if (xhrListener) { //use only to avoid multiple listeners error while debugging
this.removeEventListener("readystatechange", xhrListener);
}
this.addEventListener("load", function nonAnonymWrap(e){
xhrListener = nonAnonymWrap;//use only to avoid multiple listeners error while debugging
const response = JSON.parse(this.responseText);
if (response.hasOwnProperty(urlPropertyName)) {
console.log(response[urlPropertyName]);
}
});
}
}
xhrOpen.call(this, method, url, async, user, pass);
};
Advertisement
Answer
Ockham’s razor:
Entities should not be multiplied without necessity.
Being new to JavaScript’s rabbit hole I started going heavy on XMLHttpRequest but apparently something simpler was sufficient for my case:
//backup original function in case redirection is needed later
const windowOpen = window.open;
let isRedirectionEnabled = false;
window.open = function() {
//destination URL obtained without redirection
let targetUrl = arguments[0];
console.log(targetUrl);
if(isRedirectionEnabled) {
windowOpen.apply(this, arguments);
}
};