Detect changes on the url

Question

I need something to detect changes on the url but the page doesn't do post back, it changes dynamically adding just the div inside the html, so the URL page is something like this

http://www.examplepage/conversations/44455

and when I click on another section of the page it it is

http://www.examplepage/conversations/44874

it changes not only at the end but like this

http://www.examplepage/settings

without doing post back and reloading the javascript so my question is, is there a way to detect those changes? and event listener but how?

I search and everyone says hash event but I don't have any value after any hash so it doesn't work

EDIT

Just for the record I have no code of the page nor I have access, I'll explain better, I am doing a background google extension and I just added a slide out to an existing page, this page changes its url the way I explained above. the url changes like every page does, but they change the div inside the html so that the page doesn't have to charge everything again

you could set an interval and just check the url but a beter idea is to find the code that's changing the url and add a callback. — I wrestled a bear once., Jan 25 '16 at 18:48
When would these updates to the url be happening? Maybe attach an event listener whenever you expect a url change to check the new value — Nick Zuber, Jan 25 '16 at 18:50
@NickZuber the changes happens normally when you click on an element to change page for example here on stack overflow if I click on jobs or tags or user(if you click on one it will redirect you to a different page in my case it just change the div and url without the post back) — Hyra10, Jan 25 '16 at 19:32
@Pamblam I have no control over the page, because I'm building a extension that adds features to this page Im talking about — Hyra10, Jan 25 '16 at 19:34
Learn to use the console. Maybe try VisualEvent. Youre not giving enough info to get a helpful answer. This being an extension is the type of info you put in the question. — I wrestled a bear once., Jan 25 '16 at 19:38
@Pamblam it is because it is not part of an extension, it works different and I already search for something related with the extension. that's why I am asking just with JavaScript, but thanks anyway, I'll see what you sugested — Hyra10, Jan 25 '16 at 19:45
You could attach an event listener to all the links on the page to capture the new url — Nick Zuber, Jan 25 '16 at 19:57
It all depends heavily on how you are doing the redirect of the page. Are you using anchor tags, or changing the location via javascript on a button or element click. Based on your complete lack of detail in the OP i doubt you know, which means we wont be able to help you in a concrete way — QBM5, Jan 25 '16 at 20:25
@QBM5 I am not the one who created the page, and I can't see its code either, so I can't say anything more than I already said — Hyra10, Jan 25 '16 at 20:48
Does this answer your question? [Event when window.location.href changes](https://stackoverflow.com/questions/3522090/event-when-window-location-href-changes) — GorvGoyl, Apr 28 '21 at 12:53

resu · Accepted Answer · 2020-07-13T10:06:37.030

29

You need to store the URL when the page loads as a starting point and setInterval to check for changes and modify based on that.

The following code does this check twice a second (500ms):

// store url on load
let currentPage = location.href;

// listen for changes
setInterval(function()
{
    if (currentPage != location.href)
    {
        // page has changed, set new page as 'current'
        currentPage = location.href;
        
        // do your thing..
    }
}, 500);

edited Jul 13 '20 at 10:06

answered Jan 27 '16 at 13:26

resu

944
12
21

1

As simple as using set Interval did the trick, Thanks for the answer I tried to search for an event or something more complex but this works perfect Thanks again! – Hyra10 Jan 27 '16 at 14:50
1

The only listener currently available is `window.onhashchange` which is not helpful in this case because it looks for `#hash` changes in the url. – resu Jan 27 '16 at 18:35
is there no `onstatechange` event? – Muhammad Umer Aug 13 '17 at 14:36
@MuhammadUmer no, at least for now – resu Sep 22 '17 at 13:19

score 9 · Answer 2 · answered Mar 16 '17 at 14:08

There is no "clean", event-based way to detect such URL changes from a content script.

They are done with history.pushState API - and using that API doesn't emit any DOM event.

Two possible indirect event-based approaches, besides the already mentioned poll-based one:

An extension can override history.pushState with an injected script to additionally emit a DOM event that can be listened to in a content script.

This approach is described in detail here.

The downside is that, depending on the code of the page in question, the injected script may need to be injected early, needing run_at: document_start which is suboptimal for page load performance.
Use a background page that listens to chrome.webNavigation.onHistoryStateUpdated event.

If you need to detect this in a background page — perfect, you're done, without ever needing a content script.

If you need to detect this in a content script, you can use details.tabId in the event listener to send a message to the right content script.

Detect changes on the url

2 Answers2

Linked