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';
  }
}


};

CodePudding user response：

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

1. 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 = {
    ...
}

2. 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.

CodePudding user response：

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.