Best Way to Execute Js Only on Specific Page

Best way to execute js only on specific page

A little different approach than checking the URL path : You can group page specific event handlers in a single function and then in each include, have a domready which will call these functions.

Eg: in script.js you have two functions (outside domready) viz. onPage1Load() and onPage2Load().

While in your page1.php you have a $(document).ready(onPage1Load)
and so on for other pages. This will make sure that unintended event handlers are not registered.

Run Specific Js on Specific page Wordpress

You code is great! You are just missing a closing parenthesis:

function my_scripts() {
    if( is_page( array( 'about-us', 'contact', 'management' ) ) ){
        wp_enqueue_script( 'script-name', 'path/to/example.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

For future reference, in your wp-config.php file you can set debug to true, I believe that this will pick it up.

Execute javascript only in specific url

if (window.location.href.indexOf('reserve.php') != -1) {
    // do stuff for reserve.php page here
}

How do I tell jQuery to run a function on one specific web page only?

You could use an if statement checking for top.location.pathname.

if (top.location.pathname === '/my/path')
{
    /* magic ... */
}

Or if you want to make it more portable and give the actual if statement some meaning (so someone reading it will know what it's about) - if you have access to the body element of the document, you can add a class showing that you want to run this script.

So for instance, if /* magic ... */ in the above example has something to do with including the Facebook API, you could make your body look like <body class="has-facebook-api"> and then make a check with jQuery:

$(function () // on document.ready()
{
    if ($('body.has-facebook-api').length > 0)
    {
        /* magic ... */
    }
});

Make sure this runs after including jQuery inside a separate script tag.

While we're at it, if you're not using this script to transform the visuals of your page before it gets outputted, I'd advise you to place all or most of your script tags close to your footer to render the page sooner.

How can I execute a JavaScript function on the first page load?

The code below will execute once the onload event fires. The statement checks if the onetime function has NOT been executed before by making use of a flag (hasCodeRunBefore), which is then stored in localStorage.

window.onload = function () {
    if (localStorage.getItem("hasCodeRunBefore") === null) {
        /** Your code here. **/
        localStorage.setItem("hasCodeRunBefore", true);
    }
}

Note: If the user clears their browsers' localStorage by any means, then the function will run again because the flag (hasCodeRunBefore) will have been removed.

Good news...

Using localStorage can be tedious because of operators and long winded function names. I created a basic module to simplify this, so the above code would be replaced with:

window.onload = function () {
    if (!ls.exists('has_code_run_before')) {
        /** Your code here... **/
        ls.set.single('has_code_run_before', true);

        /** or... you can use a callback. **/
        ls.set.single('has_code_run_before', true, function () {
           /** Your code here... **/ 
        });
    }
};

Update #1

Per @PatrickRoberts comment, you can use the in operator to see if a variable key exists in localStorage, so

if (localStorage.getItem('hasCodeRunBefore') === null)

becomes

if (!('hasCodeRunBefore' in localStorage))

and is less verbose and a lot cleaner.

Secondly, you can set values as you would an object (localStorage.hasCodeRunBefore = true) though it will be stored as a string, not as boolean (or whatever data type your value is).

How to make JavaScript execute after page load?

These solutions will work:

As mentioned in comments use defer:

<script src="deferMe.js" defer></script>

<body onload="script();">

document.onload = function ...

or even

window.onload = function ...

Note that the last option is a better way to go since it is unobstrusive and is considered more standard.

Best Way to Execute Js Only on Specific Page