apply IF statement from a JS to only a particular html file

Question

Screen width as a condition to redirect to other url during on load -I'm trying to do this for only specific html pages, but can't seem to unless I put the redirect function (given in the link) as a script within the specific HTML page I want to invoke this.

Here is a breakdown of what I have/need

I have 3 files (desktop.html, mobile.html, script.js).

I want the desktop.html to redirect (or load) automatically the mobile.html if the screen width is < 992px. The code I want to use will be kept in a separate JS file which is called script.js, this file already has a bunch of named functions that are within a variable. All the named functions (so far) are triggered when the user clicks on a button that corresponds. But I wont have a button that 'triggers' for redirecting to mobile.html page, as it should be automatic if the screen width is < 992px

Example of JS file

var name = {

    first: function() {
       <---! Does something when a button is pushed on my site --->
    },
     second: function() {
       <---! Does something when a different button is pushed on my site --->
    },
    window.onload = redirectMobileHandler();
    window.onresize = () => redirectMobileHandler();
   
    function redirectMobileHandler() {
     const width = Math.max(document.clientWidth || 0, window.innerWidth || 0);
     if(width < 992) {
    window.location = 'https://linktoyourmobilesite.com';
  }
}


};

Obsidian Age · Accepted Answer · 2021-10-06T20:14:13.000

The HTML files reference the JavaScript files, so you have two options to only trigger that logic for one of your three HTML files:

Only link to the JavaScript file containing the logic in the target HTML file, by creating a new .js file that contains that logic (say index.js):

index.html

<link rel='index.js'>

index.js

var name = {
    ...
}

Reference the same JavaScript file in all three HTML files, but only call that function from within the target HTML file:

index.html

<button onclick='indexOnly()'>Button</button>

main.js

function indexOnly() {
    var name = {
        ...
    }
}

The latter option is preferable, as you can then make use of a template / header to handle loading all JavaScript files in a single location.

There is also technically a third option (though it is really just a combination of the two). If you use a framework like Angular, React or Vue, you'll get the concept of components, which automatically split this logic out for you, using encapsulation.

score 0 · Answer 2 · answered Oct 06 '21 at 20:39

0

If I understand you correctly, you want to include the script to the target html file dynamically?

If so, there are numerous ways to accomplish this, for example:

var script = document.createElement('script');
script.src = 'script.js';
document.body.appendChild(script);

You can find more examples here. However, I am not exactly sure what exactly you want to achieve. Please clarify, if my assumption is wrong.

answered Oct 06 '21 at 20:39

stuck1a

13
6

I want the script file to target HTML file. Problem is in script file all the functions are within an assigned variable (see JS File example). The named functions in my site get triggered ONLY when the user clicks on a button. What I am (was) trying to figure out is how do I add it to the variable in the script, yet it automatically get's triggered on the html file if the user is browsing on a device less than 992px in width. – Adam Lansome Oct 07 '21 at 12:42

apply IF statement from a JS to only a particular html file

2 Answers2