load and unload javascript dynamically

Question

I want to add a script

 if(screensize>980){
  add <script src="somejs">// functions should work without time delay
}
if(screensize<980){
 remove  <script src="somejs">
}

when screen size is less than 900, and I want to remove the same script when the user resize the screen to bigger size. and then back again removing and adding the script dynamically based on the screen size. script dependent functions should work without any problem (dynamically) and without delay and reloading. is it possible. I tried so many things but none worked.

$.ajax, document.createElement("script") - I tried these two but i want it dynamically remove and add.

For example: add and remove <script src="somescript">. Is there a possibility to comment and uncomment the loaded script dynamically?

Possible duplicate of Loading/unloading Javascript dynamically — Amit
– Amit, Commented Jan 22, 2016 at 10:56
Reminds me of this library conditionerjs.com , does not add/remove script dynamically but does add/remove behaviour based on different conditions. — Prashant
– Prashant, Commented Jan 22, 2016 at 10:57

pCarsten · Accepted Answer · 2016-01-22 10:58:22Z

0

Removing and adding seems very cumbersome. Can't you simply add a check for the current screen size at the start of your script, and abort if it doesn't fit the parameters?

answered Jan 22, 2016 at 10:58

pCarsten

685 bronze badges

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

2 Comments

somethinghere Over a year ago

This should have been a comment, if you do not have enough reputation to comment, earn reputation. This kind of answer is likely to get you downvotes, pushing you even further away from being able to comment. And it's only 50 reputation anyhow. (It also displays this question as 'having an answer' on the homepage, making it less likely that people with actual knowledge of the answer will look at the question, making the question useless)

pCarsten Over a year ago

@somethingthere, thank you for your guidance. Is there a way for me to remove my answer so the question will appear unanswered?

Rounin · Accepted Answer · 2016-01-22 11:14:21Z

0

I want to add a script when screen size is less than 900, and I want to remove the same script when the user resize the screen to bigger size. and then back again removing and adding the script dynamically based on the screen size.

Why not attach an Event Listener to the screen to watch out for when the screen size changes:

window.addEventListener("resize",addOrRemoveFunction,false);

Then write a function which determines the width of the screen size and adds or removes an Event Listener to myElement accordingly:

function addOrRemoveFunction() {

    if (window.innerWidth < 900) {
        myElement.addEventListener("click",myFunction,false);
    }

    else if (window.innerWidth > 899) {
        myElement.removeEventListener("click",myFunction,false);
    }
}

Then you can write whatever function you would like to have present or absent depending on the current screen width:

function myFunction() {

[Javascript here]

}

answered Jan 22, 2016 at 11:14

Rounin

29.9k13 gold badges103 silver badges127 bronze badges

1 Comment

Sugumar Venkatesan Over a year ago

actually I want to add and remove <script src="somescript">

Balah · Accepted Answer · 2016-01-22 12:55:01Z

0

jQuery's $.getScript("your script location") will half do the job. Unloading, on the other hand, I doubt it. BUT if you've structured your scripts to be modularized, you can mimic it. Something like the below might work (UNTESTED):

var baseScript;
var scripts = {};

(function (module) {
    var _field = ...;
    var _privateFunction = function() {...};
    module.property = ...
    module.publicFunction = function () {...};
})(scripts.largeScreenScript);

(function (module) {
    ...
})(scripts.smallScreenScript);

if(screensize>980){
    baseScript = scripts.largeScreenScript;
}
if(screensize<980){
    baseScript = scripts.smallScreenScript;
}

answered Jan 22, 2016 at 12:55

Balah

2,5402 gold badges19 silver badges25 bronze badges

Collectives™ on Stack Overflow

load and unload javascript dynamically

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related