Document.write(<script>) throws Unexpected token "ILLEGAL"

Question

Before you ask, I already searched a lot in Stack Overflow and I google it thousand times. Any other case I ever seen here helped me.

Let's go to my problem:

I'm trying to use the following script in my code:

<script type='text/javaScript'>
    document.write("<script src='/feeds/posts/default/-/"+hom_cat1+"?max-results=1&orderby=published&alt=json-in-script&callback=showhomeposts1'></script>");
</script>

But I'm using Blogger and it don't detect correctly my code (note the red script closing tag):

With this, I can't save the Template. So I'm trying to use convert my code into HTML entities using this website. When I encode, put this into my template and save, I get:

Uncaught SyntaxError: Unexpected token ILLEGAL 

Here's the encoded string I'm trying to use:

<script type='text/javaScript'>document.write("<script src='/feeds/posts/default/-/"+hom_cat1+"?max-results=1&orderby=published&alt=json-in-script&callback=showhomeposts1'></script>");</script>

What can I do to solve my issue?

Answer 1

The problem is that the string passed to document.write includes the characters </script>, which ends up prematurely terminating the script element that document.write is called from.

The characters </script> can't appear anywhere within a script, since the HTML parser has no way to distinguish this from an actual </script> tag.

You could try something like this instead:

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

Or, as mentioned in the comments:

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

Another option is to use the DOM API to create a script element and insert it into the document. The other answers here give some suggestions for that, but there are potential problems with the implementations (for example, document.body.appendChild will throw a TypeError if you try to call it from within the head). Something like this would be more robust:

(function() {
    var s = document.getElementsByTagName('script')[0];
    var script = document.createElement('script');
    script.src = 'http://something.com';
    s.parentNode.insertBefore(script, s);
}());

Also, type='text/javaScript' is incorrect; use text/javascript or omit the type attribute.

Answer 2

You are writing

<script type='text/javaScript'>
    document.write("<script src='/feeds/posts/default/-/"+hom_cat1+"?max-results=1&orderby=published&alt=json-in-script&callback=showhomeposts1'></script>");
</script>

So output will be script tag inside script tag that's why your output will be

<script type='text/javaScript'>document.write("<script src='/feeds/posts/default/-/"+hom_cat1+"?max-results=1&orderby=published&alt=json-in-script&callback=showhomeposts1'></script>");</script>

Instead that use only document.write("");

or

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
$("#someElement").append( script );

Answer 3

Better way to load js asynch is like this

function loadScript () {

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'feeds/posts/default/your.js' 
    document.body.appendChild(script);

}

window.onload = loadScript;

or if you don't want any function, you can use direct invocation

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'feeds/posts/default/your.js' 
document.body.appendChild(script);

As suggested by google also https://developers.google.com/maps/documentation/javascript/tutorial?hl=en#asynch