run Javascript function when I go to another page without reload

Question

I'm a super-newbie with JS, so maybe the question is super stupid.
I got this JS that is started correctly in every page. but in some cases in this blog, I want to run the same script when I go to < mysite.com/page/2 > where the page is not reloaded but only the content change.
I think I should use something like "hashchange" in the eventlistners but is not working, cause is not an hash. I don't want to run the JS after a certain ammount of time, cause is a dirty solution, and I can't change the code cause is a wordpress template, I can only edit it trough JS. any suggestion? I tried everything, in the event parameters: scroll, load, change, but nothing work, please give me suggestions. :(

waiting for yours, I leave you my code and the link on what I'm working in order to show you better the situation.

document.addEventListener("DOMContentLoaded", addStuff);
document.addEventListener("hashchange", addStuff); //<--- THIS IS NOT WORKING

function addStuff()
{
    var x = document.getElementsByClassName("t-entry-cf-detail-106360");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].innerHTML = "<a href='http://www.filmidee.it/tag/" + x[i].innerHTML.replace(/\s+/g, '-') + "'>" + x[i].innerHTML + "</a>";
}
};

http://www.filmidee.it/screening/

What if you run this function when clicking on the links that changes from one page to another? — Mauro Aguilar, Feb 26 '17 at 18:43
_"I want to run the same script when I go to < mysite.com/page/2 >"_ How do you go to "mysite.com/page/2"? What do you mean by "run the same script"? — guest271314, Feb 26 '17 at 18:47
Perhaps you could use [onbeforeunload](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload) — Mathias W, Feb 26 '17 at 19:12
@MauroAguilar I tried, it work only with some seconds of delay and just one time. like, I'm in page 1, I go in page 2, It works. but if I go back in page one, doesn't work. am I doing something wrong? I just added this `var $pn= document.getElementsByClassName('page-numbers'); for(var i=0; i<$pn.length; i++) $lba[i].onclick = function(){ setTimeout(addStuff, 3000); };` — Antonio, Feb 27 '17 at 02:30

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

You have to use a slightly different syntax according to this question: How to detect URL change in JavaScript

window.onhashchange = addStuff;

A working example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", addStuff);
    window.onhashchange = addStuff;

    function addStuff()
    {
      console.log("called addStuff");
    }

    function processClick(){
        location.hash="myValue";
    }
  </script>
</head>
<body>
    <button onclick="processClick();"></button>
</body>
</html>

edited May 23 '17 at 12:00

Community

1
1

answered Feb 26 '17 at 19:37

Johannes Filter

1,863
3
20
25

...because the event [`hashchange`](https://developer.mozilla.org/en-US/docs/Web/Events/hashchange) happens to the window, not the DOM. – Matheus Avellar Feb 26 '17 at 19:46
The hashchange doesn't work, even because the link that is generated doesn't contain any # Isn't somewhere an event that trigger function when the URL change, not necessarly with an # inside? – Antonio Feb 27 '17 at 01:56
As a hack, can you just change the hash when the content changes? location.hash="myValue"; – Johannes Filter Feb 27 '17 at 11:26
Your idea @JohannesFilter was nice, but I can't edit the HTML in this moment. Actually I got another Idea who seems to work, but creating some delay so let me know what do you think. I used the trigger the function the animation inside the page and I add this two line `var $lba= document.getElementsByClassName('isotope-wrapper'); $lba[i].addEventListener("webkitAnimationEnd", addStuff); $lba[i].addEventListener("animationend", addStuff);` what do you think? any idea to make it lighter? – Antonio Feb 28 '17 at 01:20
No, remotely debugging is hard. ;) I think you should make us of [Child Themes](https://codex.wordpress.org/Child_Themes) for further Wordpress development. You can adjust everything and changes won't get overridden when updating. – Johannes Filter Feb 28 '17 at 12:16

run Javascript function when I go to another page without reload

1 Answers1