Enable a script tag based on another script

Question

I am trying to write a script in Javascript that enables or disables other scripts based on the value of a cookie. I'll figure out how to set the cookie separately so I am just hardcoding for the moment.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <script src="./script.js"></script>
    <script class="GA" src="./scriptga.js"></script>
</body>
</html>

script.js (pseudo code as I dont know what way to do it):

var mycookie = 1

// enable script
if (mycookie=1) {
    enable script with class="GA";
    console.log("script enabled");
}
// disable script
else if (mycookie=2) {
    disable script with class="GA";
    console.log("script disabled");
}
// disable script
else {
    disable script with class="GA";
    console.log("script disabled");
}

scriptga.js:

console.log("script loaded");

Any help would be greatly appreciated as I have been at this for nearly 6 months on and off with no joy. I dont mind adding jquery or some other too to achieve this.

This is an XY problem since once a script is loaded there is no magic disable method. Do it in reverse. Don't set the script tags in html and create them depending on your cookie logic instead — charlietfl
– charlietfl, Commented Jun 28, 2020 at 0:56
If those scripts is written by you so why you don't use functions/variables instead to call & execute piece of code. — Mamdouh Saeed
– Mamdouh Saeed, Commented Jun 28, 2020 at 1:00

Mamdouh Saeed · Accepted Answer · 2020-06-29 17:16:48Z

1

Assuming you can modify those scripts (Not loaded from external source) And both will be loaded anyway but you can execute piece of code or not.

And take in mind that JS will be executed line by line & left to right so take care of undefined variables.

#1 Using Variables

As you can pass global variable from script.js to scriptga.js.

Define enableGA as boolean variable.

script.js:

var mycookie = 1
// assume that you don't want to execute 'scriptga.js' by default
var enableGA = false; 

// enable script
if (mycookie == 1) {
    enableGA = true;
    console.log("script will be executed");
}

Check enableGA is true or not.

scriptga.js:

if(enableGA){
   console.log("script executed");
}

#2 Using Functions

script.js:

var mycookie = 1
// assume that you don't want to execute 'scriptga.js' by default
var enableGA = false; 

// enable script
if (mycookie == 1) {
    console.log("script will be executed");
    enableGA(); // call function
}

scriptga.js:

function enableGA(){
   console.log("script executed");
}

edited Jun 29, 2020 at 17:16

answered Jun 28, 2020 at 1:46

Mamdouh Saeed

2,3231 gold badge12 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Des Cahill Over a year ago

Awesome htanks Mamdouh Saeed. I'll give that a go,

Lukaash · Accepted Answer · 2021-12-02 23:42:14Z

1

It is possible to disable the script by setting it's type to type="text/plain". Now setting it back to text/javascript will not run it. You need to clone the script element and insert it again.

Then:

<script type="text/plain" data-consent="ad_storage" src="js/analytics.js"></script>

<script type="text/javascript">
function enableScripts() {
    $("script[data-consent='ad_storage'][type='text/plain']").each(function(){
        $clone = $(this).clone();
        $clone.attr("type", "text/javascript").insertAfter(this);
        $(this).remove();
    });
}
</script>

answered Dec 2, 2021 at 23:42

Lukaash

1291 silver badge3 bronze badges

Collectives™ on Stack Overflow

Enable a script tag based on another script

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related