单击链接类后如何加载 JavaScript 页面刷新？

Question

How I load JavaScript main page refresh only after user clicks on specific link class? I need it when the user clicks on the link, some JavaScript (or PHP, or whatever) detects that he has clicked on this class link and only then refreshes the origin page.

Example:

When user clicks on:

<a class="link_id" target="blank" href="http://externallink.com">external link</a>

JavaScript below auto load:

window.location.reload();

PS: I can not use the onclick="location.reload()" , button or similar method for many reasons (my project particularities, for example). Moreover, my HTML will be extensive and dirty. Moreover, it is not safe for the project to let users know that the refresh is through the onclick direct on link. So I'm looking for another way to do this.

Answer 1

onclick does exactly what you said. However, if you really don't want to use it, you can always do this:

<a id="link_id" href="javascript:location.reload()">link</a>

As exemplified by this snippet:

 let i = 0;setInterval(() => {document.getElementById("span").innerHTML = i;i++}, 50);

 <a href="javascript:location.reload()">link</a><br> <span id="span"></span>

EDIT : Since you actually told me what you wanted in the comments, I present you with code!

Since you only have one element with the ID link_id you can do any of the following:

<a id="link_id" href="http://link.com" onclick="location.reload()">link</a>

OR

document.getElementById("link_id").onclick = location.reload;

OR

document.getElementById("link_id").addEventListener("click", location.reload);

If you have multiple elements under one ID, you seriously need to reconsider your HTML knowledge

YET ANOTHER EDIT : as the air of mystery and vagueness unfolds, I see that you have multiple elements with one ID, or seem to. In that case, use class, and then do this:

Array.from(document.getElementsByClassName("<classname>")).forEach(el => {
    el.addEventListener("click", () => {location.reload();});
});

I REALLY HOPE THIS IS THE FINAL EDIT - Replace <classname> with the name of your class, of course

Array.from(document.getElementsByClassName("<classname>")).forEach(el => {
  el.addEventListener("click", () => {
    if (!sessionStorage.getItem("reloaded")) {
      sessionStorage.setItem("reloaded", true);
      location.reload();
    }
  });
});

Check out this jsfiddle - it works: https://jsfiddle.net/gbdu3vpm/1/