How to trigger a page event from another page
I had a co-worker ask me, in perhaps not so few words, how to trigger a specific event on a page if / when the user is coming from another page? I asked what he was referring to, and he began to explain further.
The Scenario
The website has a primary navigation menu in the header with a couple of links, and each link goes to a different page. One of these links have a drop down menu with several links.
The parent page contains a component with several tabs. Clicking on a specific tab will load information related to its title. When a user clicks on the sub-menu links, they should go to the parent page, and it should display this unique information.
The problem occurs when you click a sub-menu link, it will go to the parent page and… well, that’s it. The proper tab doesn’t display as active, the correct content doesn’t appear, it acts as if you just click the parent link.
It isn’t enough to have a link under the parent page, nor is it enough to target the correct content with a hashtag, though it’s a start. No, in order to solve the problem, you need to include a bit of Javascript.
THE JAVASCRIPT
window.onload = function(e) {
e.preventDefault();
var hash = document.location.hash;
var selector = document.querySelector( 'a[href="' + hash + '"]' );
if( hash !== '' && selector ) {
selector.click();
}
};
Several lines of code is necessary, and really it’s about three lines that are the juicy bits. It’s pretty barebones, and you can always optimize it to run only on pages or target specific components so it doesn’t interfere with other scripts. As is it can run globally, and will work quickly if you’re in a pinch.
Breaking it down
We start with an onload event handler targeting window. This will insures the function doesn’t try to execute until the window finishes loading.
NOTE: The draw back to this approach is if you have a large page, there may be a significant delay in the scripts execution. Using document.addEventListener( "DOMContentLoaded", function(e) { to add an event listener and target the document may be faster, but it may also execute the script before the necessary DOM elements finish loading. Test each approach based on your setup to see which works best for you.
As a nice precaution, prevent any default action that the browser may typically do once the DOM is loaded. Then, set up a couple of variables to make the script look nice.
hash searches the current URL for a hashtag and pulls in its value. If the URL does not contain a hashtag it sets an empty value.
selector goes through the document, and searches for an anchor element with a value of hash. If an element is found, it returns an object, otherwise it returns null.
Making Magic
A conditional statement is made where if hash isn’t empty, and selector exists, then take the selector object and click it! This is what will cause the unique content to appear when the user selects a sub-menu link from a different page.
On the HTML side of things, all you need two types of links: one link pointing to the page and content, and one link on the page pointing to the content.
That’s all you need to trigger a page event when you’re coming from another page. No ID targeting, no special classes, no third party frameworks, just clean and direct JavaScript.