adding a script tag dynamically with document.write

Question

I dont know if this is a good idea but I am trying to add a script using document.write in my HTML document that would add a script only if the browser is online.

<script>
var online = navigator.onLine;
if(online){
  document.write("<script src='./api.js'></script>");
}
</script>

the thing is the browser is stoping at the first closing </script> tag that is inside the document.write function, causing everything else to be interpreted as HTML ( "); appears renedered in the html) , I know that I am doing something wrong but would like to know what

Note: Why split the <script> tag when writing it with document.write()? — Jonathan Lonowski
– Jonathan Lonowski, Commented Jul 8, 2014 at 21:32
Note the return value of navigator.onLine wither true or false will not definitively let you know wither the user has an active internet connection or not. — Patrick Evans
– Patrick Evans, Commented Jul 8, 2014 at 21:32
this is not an app for the general public , it's an isolated app that i will be showcasing on a screen using chrome at a gallery and therefore external users and browser fallbacks have been disregarded — Mg Gm
– Mg Gm, Commented Jul 8, 2014 at 21:39

taggon · Accepted Answer · 2014-07-08 21:38:48Z

2

Try this:

document.write("<script src='./api'></"+"script>");

You're right. Browsers read all <script> ... </script> block and pass them to JS engine. So, if you want to write </script> you should break it.

Note Using document.write to add JavaScript to document is not a good idea.

edited Jul 8, 2014 at 21:38

answered Jul 8, 2014 at 21:28

taggon

1,93614 silver badges11 bronze badges

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

1 Comment

Luis H Cabrejo Over a year ago

It works. Thanks. It may not be a good idea, but for quick fix for footer page includes, worked great.

Community · Accepted Answer · 2017-05-23 12:29:27Z

1

EDIT: please see this thread and answers: https://stackoverflow.com/a/8024286/2192152

Here is a code I used for a personal website:

/* *************************************************************
 *  Loading any js file.
 ************************************************************** */
staticPath ='./js/';
vendorPath='./js/vendor/';

src = [
    {f:'jquery-1.8.3.min.js', n:1},
    {f:'jquery-ui-1.9.2.js', n:1},
    {f:'lib.js', n:0},        
];


for (var i in src)
{
    if (src[i].n === 0) document.write('<' + 'script type="text/javascript" src="' + staticPath + src[i].f + '"></sc' + 'ript>');
    else  document.write('<' + 'script type="text/javascript" src="' + vendorPath + src[i].f + '"></sc' + 'ript>');
}

As you can see you should split the string containing you script call. I unfortunately don't know much more of why this is needed.

Note: I tried many setting and the one I provide you here is the fastest one in terms of load time (using chrome)

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Jul 8, 2014 at 21:29

Xspirits

2172 silver badges7 bronze badges

1 Comment

blex Over a year ago

also, stackoverflow.com/questions/236073/…

Jacek Pietal · Accepted Answer · 2014-07-08 21:43:55Z

1

You could try:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "./api.js";
document.head.appendChild(script);

also are you missing extension on api? should it be api.js?

edited Jul 8, 2014 at 21:43

answered Jul 8, 2014 at 21:38

Jacek Pietal

2,0191 gold badge20 silver badges28 bronze badges

2 Comments

Mg Gm Over a year ago

it somehow works without the extension as a js file but adding it would be more intuitive, i will edit my question for the sake of better understanding

Jacek Pietal Over a year ago

just change api in the line script.src = "./api"; to correct filename after you change it

Collectives™ on Stack Overflow

adding a script tag dynamically with document.write

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related