Rectangle 27 66

The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default.

javascript - Can you use both the async and defer attributes on a HTML...

javascript html5 asynchronous
Rectangle 27 32

<script type="...">...</script>

HTML5 faces the fact that there is only one scripting language on the web, and allows

<script>...</script>

The latter works in any browser that supports scripting (NN2+).

HTML5 still supports 'Other scripting languages' on the web., but defaults the type to text/javascript if no type is explicitly defined.

Sure. My point was that HTML4/XHTML1 didn't want to make JavaScript the default for reasons of theoretical purity, while HTML5 makes a saner trade-off.

What are the other scripting languages for web?

There are none.

@FakeHeal: VBScript saw some use on the client side when IE had massive domination. More recently, you can serve compile-to-JavaScript languages like CoffeeScript to the client with client-side compilation. Semi-standard WebGL practice is to put fragment shaders into script tags with a shader language for the type. Finally, there's some suspicion(?) that Dart might be natively supported in Chrome at some point. (I mean, of course, right?)

javascript - HTML Script tag: type or language (or omit both)? - Stack...

javascript html
Rectangle 27 32

<script type="...">...</script>

HTML5 faces the fact that there is only one scripting language on the web, and allows

<script>...</script>

The latter works in any browser that supports scripting (NN2+).

HTML5 still supports 'Other scripting languages' on the web., but defaults the type to text/javascript if no type is explicitly defined.

Sure. My point was that HTML4/XHTML1 didn't want to make JavaScript the default for reasons of theoretical purity, while HTML5 makes a saner trade-off.

What are the other scripting languages for web?

There are none.

@FakeHeal: VBScript saw some use on the client side when IE had massive domination. More recently, you can serve compile-to-JavaScript languages like CoffeeScript to the client with client-side compilation. Semi-standard WebGL practice is to put fragment shaders into script tags with a shader language for the type. Finally, there's some suspicion(?) that Dart might be natively supported in Chrome at some point. (I mean, of course, right?)

javascript - HTML Script tag: type or language (or omit both)? - Stack...

javascript html
Rectangle 27 108

The important thing is that nowadays, whether a particular browser supports JavaScript or not is irrelevant (clearly the great majority do) - it is irrelevant because almost all understand script blocks, which means that they know to ignore the JavaScript even if they can't interpret it.

Matt Kruse gives a slightly more detailed explanation on his JavaScript Toolbox site for why specifically not to use HTML comments within script blocks.

Quoted from that page:

In the ancient days of javascript (1995), some browsers like Netscape 1.0 didn't have any support or knowledge of the script tag. So when javascript was first released, a technique was needed to hide the code from older browsers so they wouldn't show it as text in the page. The 'hack' was to use HTML comments within the script block to hide the code.

// DON'T do this! Code is just representative on how things were done
<script language="javascript">
<!--
   // code here
//-->
</script>

No browsers in common use today are ignorant of the <script> tag, so hiding of javascript source is no longer necessary. In fact, it can be considered harmful for the following reasons:

  • Within XHTML documents, the source will actually be hidden from all browsers and rendered useless
  • -- is not allowed within HTML comments, so any decrement operations in script are invalid

+1. I knew there was someone who had a lot of information about this topic from my comp.lang.javascript days, I was perusing news group archives when your answer appeared, quoting Matt.

In XHTML, you could use a CDATA instead of the HTML comment: <script ...>//<![CDATA[ ... //]]></script>

javascript - Are HTML comments inside script tags a best practice? - S...

javascript html
Rectangle 27 108

The important thing is that nowadays, whether a particular browser supports JavaScript or not is irrelevant (clearly the great majority do) - it is irrelevant because almost all understand script blocks, which means that they know to ignore the JavaScript even if they can't interpret it.

Matt Kruse gives a slightly more detailed explanation on his JavaScript Toolbox site for why specifically not to use HTML comments within script blocks.

Quoted from that page:

In the ancient days of javascript (1995), some browsers like Netscape 1.0 didn't have any support or knowledge of the script tag. So when javascript was first released, a technique was needed to hide the code from older browsers so they wouldn't show it as text in the page. The 'hack' was to use HTML comments within the script block to hide the code.

// DON'T do this! Code is just representative on how things were done
<script language="javascript">
<!--
   // code here
//-->
</script>

No browsers in common use today are ignorant of the <script> tag, so hiding of javascript source is no longer necessary. In fact, it can be considered harmful for the following reasons:

  • Within XHTML documents, the source will actually be hidden from all browsers and rendered useless
  • -- is not allowed within HTML comments, so any decrement operations in script are invalid

+1. I knew there was someone who had a lot of information about this topic from my comp.lang.javascript days, I was perusing news group archives when your answer appeared, quoting Matt.

In XHTML, you could use a CDATA instead of the HTML comment: <script ...>//<![CDATA[ ... //]]></script>

javascript - Are HTML comments inside script tags a best practice? - S...

javascript html
Rectangle 27 7

Any W3C compliant browser will recognize the async attribute and treat the script properly, whereas legacy IE versions will recognize the defer attribute.

Since both attributes are boolean you don't have to assign any value.

javascript - Can you use both the async and defer attributes on a HTML...

javascript html5 asynchronous
Rectangle 27 76

I know you're thinking "why I can't I just use src here? I've seen stuff like this...":

<script id="myJson" type="application/json">
 { 
   name: 'Foo' 
 }
</script>

<script type="text/javascript">
    $(function() {
        var x = JSON.parse($('#myJson').html());
        alert(x.name); //Foo
     });
</script>

... well to put it simply, that was just the script tag being "abused" as a data holder. You can do that with all sorts of data. For example, a lot of templating engines leverage script tags to hold templates.

You have a short list of options to load your JSON from a remote file:

$.get('your.json')
  • Write a file that sets a global variable to your json. (seems hokey).
  • Pull it into an invisible iframe, then scrape the contents of that after it's loaded (I call this "1997 mode")
  • Consult a voodoo priest.

Remote JSON Request after page loads is also not an option, in case you want to suggest that.

... that doesn't make sense. The difference between an AJAX request and a request sent by the browser while processing your <script src=""> is essentially nothing. They'll both be doing a GET on the resource. HTTP doesn't care if it's done because of a script tag or an AJAX call, and neither will your server.

Great answer. When you say "the script tag being 'abused'" you mean that is a wrong (maybe not wrong, but "creative") use of the script tag? Your n. 2 option is the one we already have in production, I was looking for a strictly json/no-js solution, out of pure experimentation (I'm fine with it not being possible if I'm sure it is). Concerning the final point, I need this information before onload event, and I don't want to make the whole initialization depend of an asynchronous request which may vary in completion time. This is the key difference between Ajax call and script tag.

No, I don't think it's "wrong", per say, just... "creative" is probably a good word for it. If actually writing the JSON into the <script> tag is possible, I'd go that route, I guess.

yeh, the whole challenge was loading it using the script tag src attribute and "obfuscate" this information in the document.

Well, you can't really hide data from users in a client-side browser app. They can just go into their browser's developer tools and set a breakpoint in the JavaScript and examine objects however they like.

@Jaydipsinh, then you need to resolve your CORS issues, and use Ajax. There's a reason browsers disallow this sort of behavior. Most browsers won't even let you hack your way around CORS with an iframe anymore.

HTML/Javascript: how to access JSON data loaded in a script tag with s...

javascript html json html5 script-tag
Rectangle 27 76

I know you're thinking "why I can't I just use src here? I've seen stuff like this...":

<script id="myJson" type="application/json">
 { 
   name: 'Foo' 
 }
</script>

<script type="text/javascript">
    $(function() {
        var x = JSON.parse($('#myJson').html());
        alert(x.name); //Foo
     });
</script>

... well to put it simply, that was just the script tag being "abused" as a data holder. You can do that with all sorts of data. For example, a lot of templating engines leverage script tags to hold templates.

You have a short list of options to load your JSON from a remote file:

$.get('your.json')
  • Write a file that sets a global variable to your json. (seems hokey).
  • Pull it into an invisible iframe, then scrape the contents of that after it's loaded (I call this "1997 mode")
  • Consult a voodoo priest.

Remote JSON Request after page loads is also not an option, in case you want to suggest that.

... that doesn't make sense. The difference between an AJAX request and a request sent by the browser while processing your <script src=""> is essentially nothing. They'll both be doing a GET on the resource. HTTP doesn't care if it's done because of a script tag or an AJAX call, and neither will your server.

Great answer. When you say "the script tag being 'abused'" you mean that is a wrong (maybe not wrong, but "creative") use of the script tag? Your n. 2 option is the one we already have in production, I was looking for a strictly json/no-js solution, out of pure experimentation (I'm fine with it not being possible if I'm sure it is). Concerning the final point, I need this information before onload event, and I don't want to make the whole initialization depend of an asynchronous request which may vary in completion time. This is the key difference between Ajax call and script tag.

No, I don't think it's "wrong", per say, just... "creative" is probably a good word for it. If actually writing the JSON into the <script> tag is possible, I'd go that route, I guess.

yeh, the whole challenge was loading it using the script tag src attribute and "obfuscate" this information in the document.

Well, you can't really hide data from users in a client-side browser app. They can just go into their browser's developer tools and set a breakpoint in the JavaScript and examine objects however they like.

@Jaydipsinh, then you need to resolve your CORS issues, and use Ajax. There's a reason browsers disallow this sort of behavior. Most browsers won't even let you hack your way around CORS with an iframe anymore.

HTML/Javascript: how to access JSON data loaded in a script tag with s...

javascript html json html5 script-tag
Rectangle 27 137

The language attribute has been deprecated for a long time, and should not be used.

When W3C was working on HTML5, they discovered all browsers have "text/javascript" as the default script type, so they standardized it to be the default value. Hence, you don't need type either.

For pages in XHTML 1.0 or HTML 4.01 omitting type is considered invalid. Try validating the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://example.com/test.js"></script>
</head>
<body/>
</html>

You will be informed of the following error:

Line 4, Column 41: required attribute "type" not specified

So if you're a fan of standards, use it. It should have no practical effect, but, when in doubt, may as well go by the spec.

If you're using HTML5 and the script is JavaScript, specifying type is completely unnecessary as text/javascript is the default.

javascript - HTML Script tag: type or language (or omit both)? - Stack...

javascript html
Rectangle 27 137

The language attribute has been deprecated for a long time, and should not be used.

When W3C was working on HTML5, they discovered all browsers have "text/javascript" as the default script type, so they standardized it to be the default value. Hence, you don't need type either.

For pages in XHTML 1.0 or HTML 4.01 omitting type is considered invalid. Try validating the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://example.com/test.js"></script>
</head>
<body/>
</html>

You will be informed of the following error:

Line 4, Column 41: required attribute "type" not specified

So if you're a fan of standards, use it. It should have no practical effect, but, when in doubt, may as well go by the spec.

If you're using HTML5 and the script is JavaScript, specifying type is completely unnecessary as text/javascript is the default.

javascript - HTML Script tag: type or language (or omit both)? - Stack...

javascript html
Rectangle 27 29

Basically it is to allow to write a document that is both XHTML and HTML. The problem is that within XHTML, the XML parser will interpret the &,<,> characters in the script tag and cause XML parsing error. So, you can write your JavaScript with entities, e.g.:

if (a &gt; b) alert('hello world');

But this is impractical. The bigger problem is that if you read the page in HTML, the tag script is considered CDATA 'by default', and such JavaScript will not run. Therefore, if you want the same page to be OK both using XHTML and HTML parsers, you need to enclose the script tag in CDATA element in XHTML, but NOT to enclose it in HTML.

This trick marks the start of a CDATA element as a JavaScript comment; in HTML the JavaScript parser ignores the CDATA tag (it's a comment). In XHTML, the XML parser (which is run before the JavaScript) detects it and treats the rest until end of CDATA as CDATA.

javascript - When is a CDATA section necessary within a script tag? - ...

javascript html xhtml cdata
Rectangle 27 6

JavaScript included in HTML defined event handlers is also not permitt...

You are attempting to load/run scripts that violate the Content Security Policy. This affects both your attempt to load jQuery from a source external to your extension and your attempted use of an inline script (your $(document).read() code).

You can access the console for the popup by right-clicking in the popup and selecting "Inspect". The console would have shown you the following errors:

Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".

and

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-qMVaiPhbudnaz91QqECVnbdTvKWnqeultnb/Nt/ybo8='), or a nonce ('nonce-...') is required to enable inline execution.
script-src 'self'; object-src 'self'

This policy adds security by limiting extensions and applications in three ways:

Eval and related functions are disabled

  • Inline JavaScript will not be executed This restriction bans both inline blocks and inline event handlers (e.g. <button onclick="...">).
  • Only local script and and object resources are loaded Instead of writing code that depends on jQuery (or any other library) loading from an external CDN, consider including the specific version of jQuery in your extension package.

For loading jQuery, the best solution is to download the jQuery code. From the question, the code you are using is at: http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js. However, as mentioned by Ted, that is quite an old version of jQuery. Unless you have a reason to be using an older version, you might try https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js. You can then store that file in your extension directory (or in a subdirectory) and include it in your popupindex.html with

<script src="jquery.min.js"></script>

Your own JavaScript code is not running because the default content security policy for extensions does not permit inline scripts. The best solution is to move your $(document).ready() code into a separate file (e.g. popupindex.js) which is then included in your popupindex.html using:

<script src="popupindex.js"></script>

Obviously, that needs to be after the <script> tag that is loading jQuery.

You can include inline scripts, but you will need to supply a "hash of the script in the "script-src" directive" in the value for the content_security_policy key within your manifest.json. However, doing so is just not worth the time and effort. It is much easier to move the code into a separate file.

Code that you add in HTML for event handlers is JavaScript and is also not permitted. For example, the following will fail:

<button onclick="doMyThing();">My button</button>
<button id="doMyThingButton">My button</button>
document.getElementById('doMyThingButton').addEventListener('click',doMyThing,false);

The following complete extension, which runs your jQuery code, produces a popup which looks like:

{
    "description": "Demonstrate use of jQuery in a popup.",
    "manifest_version": 2,
    "name": "jQuery-in-popup",
    "version": "0.1",

    "browser_action": {
        "default_icon": {
            "48": "myIcon.png"
        },
        "default_title": "Show panel",
        "default_popup": "popupindex.html"
    }
}
<!doctype html>
<html>
<head>
    <title>PassVault</title>
    <meta charset="utf-8">
    <script type='text/javascript' src='jquery.min.js'></script>
    <script type="text/javascript" src='popupindex.js'> </script>
</head>
<body>
    <div id="rainbow"> </div>
    <div id="loginBox">
        <div id="welcome"> Dobrodoli, uporabnik! </div><br>
    </div>
</body>
</html>
$(document).ready(function () {
    $("div").css("border", "3px solid red");
});

@Makyen what if nothing addon is not able to access the browser memory? how to resolve this?

@Sarvesh, I'm not sure what you are asking. Could you please clarify?

Using the add-on I have stored data in browser. Say xyz is stored in browser local storage. Now there is a button in add-on which will pop-up this xyz taking from local memory and show in alert box... This showing in alert is not working

@Sarvesh, I'm still not clear on what you are trying to say. It sounds like you may need to ask a question.

javascript - Simple jQuery within