Check if Javascript script exists on page

Question

I have a bookmarklet that I've made and it loads a script from my server onto the users current page. However I have an if check in my script that if a condition is not met then no action is taken. However if the user then meets that condition then the code is run, but has caused there to be two sets of scripts inserted into their page. Can i prevent this?

 <a href="javascript: (function () {
    var jsCode = document.createElement('script');
    jsCode.setAttribute('src', 'http://xxx.co.uk/xxx/script.js');
  document.body.appendChild(jsCode);
 }());">Bookmarklet</a>

Dagg Nabbit · Accepted Answer · 2014-08-18 23:59:52Z

52

You can check whether your script is loaded like this:

function isMyScriptLoaded(url) {
    if (!url) url = "http://xxx.co.uk/xxx/script.js";
    var scripts = document.getElementsByTagName('script');
    for (var i = scripts.length; i--;) {
        if (scripts[i].src == url) return true;
    }
    return false;
}

Alternatively, you could do something like this:

<a href="javascript:
    if (!jsCode) {
        var jsCode = document.createElement('script');
        jsCode.setAttribute('src', 'http://xxx.co.uk/xxx/script.js');
        document.body.appendChild(jsCode);
    }
 ">Bookmarklet</a>

This "pollutes" the global namespace with the jsCode variable, but that might be a necessary evil. You could rename it to something that is unlikely to appear in the document where the bookmarklet is run.

Please note that while the javascript URI scheme is okay for bookmarklets as in this case, it's not considered to be a good practice for normal use.

edited Aug 18, 2014 at 23:59

answered Mar 11, 2012 at 22:00

Dagg Nabbit

77k19 gold badges115 silver badges142 bronze badges

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

4 Comments

benhowdle89 Over a year ago

Oh ok, what's the modern way to create bookmarklets now-a-days?

Dagg Nabbit Over a year ago

This is fine, I was missing the fact that it was a bookmarklet earlier... let me re-add that in a way that makes sense

Mousa Alfhaily Over a year ago

Some scripts maybe add with a random query string at the end of the URL so an even better solution is to use the includes function instead of '==' operator.

HHFox Over a year ago

There is some danger in checking scripts[i].src if you reference internal sources. At least Chrome prepends "localhost" in case that a relative path was used, e.g. test.js. I now use scripts[i].getAttribute('src')

Robert Henderson · Accepted Answer · 2014-02-19 20:51:29Z

16

Just check the selector length. Here's an example using jQuery:

if ($('script[src="http://xxx.co.uk/xxx/script.js"]').length > 0) {
    //script exists
}

answered Feb 19, 2014 at 20:51

Robert Henderson

4033 silver badges8 bronze badges

Comments

Cord Rehn · Accepted Answer · 2016-08-08 17:12:09Z

13

You can place id attributes on your script tags and use document.getElementById('your-id') to identify whether the script is on the page before adding.

if (!document.getElementById('your-id')) {
    // append your script to the document here, ensure it has its id attribute set to 'your-id'
}

answered Aug 8, 2016 at 17:12

Cord Rehn

1,14914 silver badges22 bronze badges

Comments

Jan Werkhoven · Accepted Answer · 2022-03-19 20:44:31Z

13

Solution with ES6, no jQuery:

const url = 'http://xxx.co.uk/xxx/script.js';

function scriptExists(url) {
  return document.querySelectorAll(`script[src="${url}"]`).length > 0;
}

if(scriptExists(url)) {
  ...
}

It's not recommended to inline JS into HTML. Instead add event listeners:

 function bookmark() {
   if(scriptExists(url)) {
     ...
   }
 }

 const button = document.querySelectorAll('a.bookmark');
 button.addEventListener('click', bookmark, false);

edited Mar 19, 2022 at 20:44

answered Apr 12, 2017 at 2:20

Jan Werkhoven

2,9641 gold badge24 silver badges31 bronze badges

Comments

Arun Prasad E S · Accepted Answer · 2020-02-26 13:25:50Z

2

In case working with local and live alternatively.

The exact URL may change. I think the ID method is better.

This is a combination of Two StackOverflow answers.

if (!document.getElementById('your-id')) {
        addScript("your_script_src"); //adding script dynamically
        addCSSFile("your_css_src"); // adding css files
}

function addScript(path) {
        var head = document.getElementsByTagName("head")[0];
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = path;
        s.id = "your-id";
        head.appendChild(s);
}

function addCSSFile(path) {
    var head = document.getElementsByTagName("head")[0];
    var s = document.createElement("style");
    s.type = "text/css";
    s.src = path;
    head.appendChild(s);
}

edited Feb 26, 2020 at 13:25

answered Jan 20, 2017 at 6:59

Arun Prasad E S

10.2k8 gold badges81 silver badges94 bronze badges

Comments

voigtan · Accepted Answer · 2012-03-11 21:59:55Z

0

if you create a variable in the global scope (window.yourVariable) and check if that exists already then you can decide if you want to add your jsCode snippet code or run whatever you are running in script.js

answered Mar 11, 2012 at 21:59

voigtan

9,0212 gold badges31 silver badges30 bronze badges

Comments

Djamel eddine CHAHRAT · Accepted Answer · 2022-04-07 07:04:47Z

0

if (document.getElementById('element-id')) {
// if exist must do something 
}

hi, this is worked for me, please try it if you still need it

edited Apr 7, 2022 at 7:04

answered Oct 22, 2020 at 15:41

Djamel eddine CHAHRAT

1551 silver badge9 bronze badges

1 Comment

Samathingamajig Over a year ago

Please fix your formatting error (the } is outside of the code block) and your typo (plesea)

Collectives™ on Stack Overflow

Check if Javascript script exists on page

7 Answers 7

4 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related