How can I catch when the browser URL was changed?
I have the following scenario:
In my page I have an iframe when the user clicks inside the iframe the iframe content changes and the URL in the browser is changed via js.
Nothing else will change outside the iframe (not even the iframe src).
There is any possibility to check if the URL was changed?
This is not working:
jQuery(window).on("hashchange", () => {
}
EDIT: I fixed this problem using our internal event bus after the URL was changed, but I still think that there are better solutions for this using already built in events...
I am not sure about because the iframe is changing the url but you can try using the onbeforeunload event: it should be fire when a window is about to unload resources.
window.onbeforeunload = function(e) {
// ...
};
Keep in mind that the hashchange should only work when hash changes (not complete URL).
Set session variable when the visitor clicks certain button.
Related
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
I noticed that YouTube doesn't actually reload when you click a link/video on their website. If you define a variable in the console you'll see it will persist.
But neither popstate nor beforeunload get fired. So how is Youtube accomplishing that? And how can I detect that URL change without making a timer constantly check the URL bar.
window.onpopstate = function(event) {
console.log('popstate test!')
return "test"
}
window.onbeforeunload = function(event) {
console.log('beforeunload test!')
return "test"
}
I'm not just looking for a YouTube-solution, I'm looking for a general solution that covers the technology YouTube is using.
They're using onpopstate. Paste your JavaScript into the JavaScript console, click on a video, and then click the Back button. You should now see "popstate test!" in the console.
The real problem here is that there's no onpushstate event, but this person seems to have implemented it. There was also a previous StackOverflow question about it. However, this don't seem to work for YouTube, perhaps because they are trying to edit the pushState property of history, but YouTube actually stored history.pushState in a separate variable and is thus unaffected by this code.
However, this transitionend event on the #progress element just for YouTube seems to work.
This can actually be implemented in a really simple way. Suppose you have a link in your webpage
<a id="mylink" href="/new-url">My link</a>
You can override its behavior by returning false from an event handler:
document.getElementById("mylink").onclick = function (event) {
window.history.pushState({urlPath:'/new-url'}, "", "/new-url");
// use ajax to reload parts of the page here
return false;
}
Using this technique you can make only part of the page reload when clicking the link.
Edit
I believe youtube does not listen in any way for location changes. This is because if you actually call
window.location = '/watch?v=notrelevant'
The webpage is still refreshed.
Hi I want to capture event of windows closing and want to remove session values . After several search I found onBeforeUnload event which is triggered each time when you navigate to different page or unloads the page.even on reload this event will be triggered which is not my requirement. I want specific only windows closing event in all browsers to invalidate the session values.
Run JavaScript code on window close or page refresh?
/* The most acceptable answer seemed to be as follows in vanilla JS
and was addressed at the linked address already.*/
window.onbeforeunload = closingCode;
function closingCode(){
//I would capture the URL prior to unload here and if it does NOT
//exist or is not your url domain then you can unload variables here
return false;
}
I'm wondering if I have a page, that contains multiple iFrames and if I'm communicating through modification of the iFrame src attribute, would it be possible to set a hashChange listener on the src attribute.
Of course this would have to be inside the iFrame code, but trying this:
$(document).ready(function () {
console.log(window);
$(window).on('hashchange', function() {
console.log("IFRAME HASH CHANGED");
});
});
Does not trigger anything.
Question:
Any idea if this is possible? If not, how else could it be done?
Thanks for inputs!
The code above is fine. You should have no issues setting a hashchange event listener on the iframe's window. The problem is that you are viewing the console for the parent window. For example, if you change your console.log to an alert, you will see that it is in fact working.
If you're using google chrome's developer tools, you can click on this drop-down to switch between which window context you are in:
I have an iFrame, not controlled by me, that has an initial known source url. As links within the iframe are clicked, the url and content changes, but I want to capture that location change before it loads, and possibly even interrupt that load.
I know I can capture an iframe's location data like so:
$('iframe').on('load',function() { var location = this.contentWindow.location.href; }
but is there a way capture the location before it loads, either with jQuery (preferred) or raw javascript?
There is no widely supported way to monitor an iframe for .src changes. Some versions of IE have a propertyChanged event, but other browsers do not support that.
If the links that can change the iframe .src are known and they are accessible (not in a cross domain iframe), then you could just add your own click handlers on those links and check the iframe .src after the default click is processed. Depending upon the details of the page, you could either just check on your own event handler or you might need to set a short timer and check after the other event handler runs.