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