Script tag attributes - javascript

Question

I am trying to understand the basics of templating and have the following problem. When I try to attach ID or/and type attribute to the <script> tag in my HTML code it just doesn't work:

<!DOCTYPE html>
<html>

           <head>
                 <link rel="stylesheet" type="text/css" href="style.css">
             <script src="somescript.js"></script>

           </head>
           <body>

    <script type="text/html" id="template1">
                <form name="formXY">
                    <p>
                        <label>Field1
                            <input type="text" name="form_field1" value= "{{field1}}">
                        </label>
                        <button type="button">Submit</button>
                    </p>
                </form>
            </script>
</body>
</html>

I ran this in chrome/firefox/IE9/Opera and none of them parse the code between the <script> tags. Browsers think it is just a text field. When I remove ID and type attributes it is again parsed correctly.

I am probably missing something very basic...

@adeneo - templates? http://stackoverflow.com/a/5679857/144496 — Martin, Jan 12 '13 at 23:19
@Martin - yes, some frameworks and templating systems do it that way, does'nt mean it's generally a good idea! — adeneo, Jan 12 '13 at 23:22

Pete Mitchell · Answer 1 · 2013-01-12T23:33:43.290

2

You need to add a non javascript type to the script tag, as the point is that you don't want the browser to parse it (as javascript), and by using a custom type the browser will ignore it (until you grab it with javascript that is)

<!DOCTYPE html>
<html>

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
   <script src="somescript.js"></script>

</head>
<body>

    <script type="text/x-handlebars-template" id="template1">
        <form name="formXY">
        <p>
            <label>Field1
            <input type="text" name="form_field1" value= "{{field1}}">
            </label>
            <button type="button">Submit</button>
        </p>
        </form>
    </script>
</body>
</html>

And then in your javascript somescript.js you need to get the contents of that script tag using something like this

var uncompiledTemplate = document.getElementById('template1').innerHtml;

// then pass this template to your templating engine...
// if your using handlebars:
var template = Handlebars.compile(uncompiledTemplate);

And then you can work with your template!

edited Jan 12 '13 at 23:33

answered Jan 12 '13 at 23:18

Pete Mitchell

2,879
1
16
22

Thanks, thats the thing I was missing:)...so first I need to install a templating engine and after that I can use the attributes. Thanks – DDEX Jan 12 '13 at 23:30
2

The "text/html" type also protects the script contents from JavaScript (attempted) evaluation. It doesn't have to be a totally made-up type. – Pointy Jan 12 '13 at 23:31
@Pointy thanks! I'll update my answer. The custom type can be a good hint at what templating engine is in use perhaps? Some of the syntax can be similar – Pete Mitchell Jan 12 '13 at 23:32
@PeteMitchell oh yes definitely, esp. if the template system has hooks in it to auto-compile such templates. – Pointy Jan 12 '13 at 23:57
Using "text/html" is crucial for an IDE like PyCharm to format the content of the script tag correctly. If you use a made-up type it will interpret the content as an ordinary string, making usage of IDE features like highlighting etc useless... – Karlis Rode Apr 17 '15 at 13:16

score 0 · Answer 2 · answered Jan 12 '13 at 23:41

The content of the <script> tag is never parsed into DOM elements, the contents simply appear in the DOM as text (although <script> is display:none; by default so it does not appear on the page). If a type is provided has to be one that the browser recognises before it attempts to execute it. Note that older browsers used the language attribute instead.

Script tag attributes - javascript

2 Answers2