-1

I have script, what work one time when window loaded, it work on this page, but site use some navigation links what not fully reload page (see this answer for example: Modify the URL without reloading the page). How can I detect that and run my script again?

I have one idea: storing URL (without anchor) in variable and check it periodically with current url, but I think this is bad solution. May be you know better one?

JavaScript or JQuery is possible to use.

Community
  • 1
  • 1
XCanG
  • 429
  • 6
  • 16
  • Catch the `a` on click event and fire a custom event off and listen for it. https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events – Canvas Sep 09 '16 at 22:42
  • check http://stackoverflow.com/questions/5129386/how-to-detect-when-history-pushstate-and-history-replacestate-are-used – Peter Sep 09 '16 at 22:48
  • @Canvas, hm, I think it will work in another situations, were link go to `#` or `javascript:;` and will triggered on same page double and more time, that may be bad. – XCanG Sep 09 '16 at 22:51
  • @Canvas I try this code: `var navel = document.getElementsByTagName("a"); navel.addEventListener("click", myfunction(), false);` but it not triggered for me (check by `console.log()`), but example on jquery below `$('a').on("click", myfunction());` triggered, but not ideal and still have problems with it. – XCanG Sep 09 '16 at 23:43

4 Answers4

1

Use window.onpopstate or window.onpushstate if u are using pushState or replaceState ( from ur given example).

ex:-

To Navigate Without reload ( you already did this )

// Your code to fetch new URL body and title
// update the DOM then use following code to update URL also (don't use location.href, otherwise the page reloads)
// sorry u already know this because u provided the example ;)

let data = { title : "Current Title", 
body : document.body.innerHTML" } // to store current page data

window.history.pushState(data, 0, "newURL");

To detect navigation ( i.e., you wanna do )

window.onpushstate: when above code runs for navigation to a new url and load new content without reload ...

window.onpushstate(function() {
  // detects ur navigation
})

window.onpopstate: when you press back button

window.onpopstate(function (e) {
  let { data } = e.state;
  // data object that u gave in pushState method when u called ur last / latest pushState method...
  // use this data to retrieve previous data content and title

  let { title, body } = data;
  document.title = title;
  document.body.innerHTML = body
})

for more detail mdn docs

Abhay Bisht
  • 185
  • 7
0

I think you are looking for hashchanges you can listen to this event onhashchange

window.onhashchange = function(e) {
    var sublink = window.location.hash.substring(1);
    //do your thing here
}

You can also check what updated the url after the hashchange

var sublink = window.location.hash.substring(1);

joyBlanks
  • 6,419
  • 1
  • 22
  • 47
  • looks like XCanG is looking for URL changes without hash. Changes in hash won't cause the browser to reload in the first place, but he is looking for url modification (pushstate) without reloading, so he probably isn't asking anything related to location.hash. – Peter Sep 09 '16 at 22:54
  • yea, try this code, but looks like it not detect navigation I have on site – XCanG Sep 09 '16 at 22:59
0

That's because the new pages are either

1 ) Already at the ready and simply being brought in-sight by jQuery

2 ) Ajax called in.

If you scout for your navigation (the links you click on to go to the other page), you should find <a href="someUrl" data-attr="someUrlMaybe">click me</a> or so.

If you look for wherever this is is bound (i.e.: $('#navigation a').on("click", function(){});, you can simply wrap your script within a function, and trigger this function together with loading the new page every time. (after it, obviously).

I wish I could be more clear, but you did not provide any code yourself, so I have absolutely no idea of what kind of example I should be giving here.

-- the point: Those page changes are triggered by something in your javascript. Find the trigger that makes the page-change happen, and simply insert myCustomFunction();.

If you want to make your bindings update with a new DOM, you could use this:

  function setBindings(){
  //removing the old bindings prevents the "click" from triggering twice.
  $('a').off("click");
  $('a').on("click", function(){
    //load page and such here
    //Apply script you want to run here
    setbindings(); //rerun the function to set the bindings.
  });
}
NoobishPro
  • 2,539
  • 1
  • 12
  • 23
  • Ok, `$('a').on("click", function(){});` is first workable solution to me, but I got here 2 problems: 1) it not applyed on new elements, that will be in new DOM and 2) it not wait until new DOM loaded if I try to call this line again. – XCanG Sep 09 '16 at 23:35
  • Then put the function itself into a function :) Let me update my answer with an example – NoobishPro Sep 09 '16 at 23:46
  • Something like that? – NoobishPro Sep 09 '16 at 23:49
0

I think the URL of script is cached，do you used Ajax get method？if it is，please like this write url "wwww.baidu.com?"+Math.random();if not is ,in the firefox ,you can used pageshow event.

遁地龙卷风
  • 40
  • 4