链接上的Javascript触发事件

Question

So I just need some help with this. I have an anchor on a separate HTML page, all these pages are linked with one external JS file.

So I have

<!-- language: none -->

page1.html
page2.html
js.js

In page 1, I have a link that links to a specific anchor on page2, I want a javascript function to fire on page2 when a user opens that link. I can't use onclick from the page1 link to grab the element on page 2 by ID and call the function in the js due to xss stopping it.

So tl;dr

page1.html -> Link is here
page2.html -> destination is here, when user arrives at destination, I want a function in the js file to fire. But ONLY when he arrives at the specific anchor on page 2 via link. (ex: link on p1 goes to page2.html#destination )

Is this possible? I've tried attaching onfocus , onevent , and onchange handlers to the anchor on page two but it's not working.

Answer 1

Yes; use the property window.location.hash . Like so (on page2.html):

if(window.location.hash === '#destination') {
    // Call your function here
}

Answer 2

If you want some JS in page2 to run only when page2 is arrived at a specific way, then the usual way to do that is to have page1 add a query parameter when going to page2 and have page2 look for that query parameter. When page2 starts up, it looks for the query parameter and runs some extra JS if it's present.

So, if page1 is page1.html and page2 is page2.html , then your special link in page1 will link to page2.html?action=1 .

The javascript in page2.html will look for action=1 in the URl and run it's special JS only if it's on page2.html and it finds action=1 in the URL.

All query parameters are available via window.location.search . If you aren't expecting any other query parameters, then you can just use:

if (window.location.search == "?action=1") {
    // execute your code here
}

If there could be other query parameters, then you can use this:

if (window.location.search.match(/(\?|&)action=1($|&)/)) {
    // execute your code here
}