jQuery: How to detect path changes?

Question

I'm trying to load a script on LinkedIn through an extension. However, it looks like it is using AJAX to render the main container every time you click on one of the links in the header.

I have this, which does not work:

$(function() {
  console.log("LOADED");
  $(window).on("load", () => {
    $(window).on("hashchange", function(e) {
      console.log("PATH CHANGED") // I want to print this every time the route changes and scrape the updated DOM
    });
  });
});

It makes sense since it's not using hashes. I don't know how to add a listener to path changes + scrape the updated dom.

Is there a way to do this?

What kind of url changes? if the page is reloading, there is nothing to listen for. Your code will reload with it. — Kevin B, Apr 03 '18 at 15:11
The thing is it's not reloading. As mentioned above it is using AJAX to render the main container. This isn't a full page refresh — bigpotato, Apr 03 '18 at 15:12
You might want to look at using a `MutationObserver` ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ) — DBS, Apr 03 '18 at 15:12
Then what's making it change? (there's certainly better options than mutation observers if you're listening for ajax events or url change events) — Kevin B, Apr 03 '18 at 15:12
Clicking on links around the page. Is there no other way of listening to route changes other than adding click handlers on anchor tags? — bigpotato, Apr 03 '18 at 15:13
Oh, there is, but how is the click on the anchor tag changing the url? — Kevin B, Apr 03 '18 at 15:14
It's using JS. You can check it out on https://www.linkedin.com — bigpotato, Apr 03 '18 at 15:14
Yes, but HOW? if you're just asking about some other website, this discussion is pointless unless *you* do the research to see what they are doing. — Kevin B, Apr 03 '18 at 15:16
Hint: there's only one way to change the url (not hash) without reloading the page. — Kevin B, Apr 03 '18 at 15:18
Would you mind telling me? I've already been struggling with this for the past hour, hence the SO question — bigpotato, Apr 03 '18 at 15:19
https://developer.mozilla.org/en-US/docs/Web/API/History_API — Kevin B, Apr 03 '18 at 15:20

score -1 · Answer 1 · answered Apr 03 '18 at 15:20

-1

The change of the URL in the browser without reload is done by history.pushstate

 history.pushState({id: 'SOME ID'}, '', "http://thisisthenewURL.com/whateva");

you can listen to this event by using the following code:

 window.onpopstate = function (event) {
  // do stuff here
 }

This has been answered in the following post: How to detect when history.pushState and history.replaceState are used?

answered Apr 03 '18 at 15:20

Edwin Krause

1,766
1
16
33

When I paste: `window.onpopstate = function (event) { console.log("xxxxxx") }` on linkedin.com it only works when I go backwards – bigpotato Apr 03 '18 at 15:23
1

Thanks for the -1 then – Edwin Krause Apr 03 '18 at 15:24
1

That wasn't me fyi – bigpotato Apr 03 '18 at 15:24

jQuery: How to detect path changes?

1 Answers1