javascript - 为什么使用“javascript：" bad?

Answer 1

_{Oh the wonderful confusing world of JavaScript. The code you posted probably doesn't do what most programmers think it's doing.}

There is a difference between each of the following lines:

<a onclick="alert('Hello World!')"...>example</a> //V1
<a href="javascript: alert('Hello World!')"...>example</a> //V2
<a onclick="javascript: alert('Hello World')"...>example</a> //V3

although they all will alert Hello World!.

The first (V1) has an inline click event bound via the [onclick] attribute. It may also contain an [href] attribute that navigates to another location after the [onclick] attribute has executed, or any number of other click events bound in the code, assuming the default behavior hasn't been prevented.

The second (V2) has an executable javascript: url set as the [href] attribute. It might also contain an [onclick] attribute or other click events bound in external scripts.

The first and second examples (V1 & V2) have identical code executed, which is:

alert('Hello World!')

The third example (V3) has an inline click event bound via the [onclick] attribute, just like V1, however the code being executed is different. The executed code is:

javascript: alert('Hello World')

Although it looks like a javascript: url, it's actually just using a label in javascript.

Labels in JavaScript are useful for skipping out of nested loops, as in the following example code:

label: for (i = 0; i < 5; i++) { //labeled line
    for (j = 0; j < 5; j++) {
        console.log(i, j);
        if (i === 2 && j === 3) {
            break label; //this jumps out of both for loops
        }
    }
}

In most inline JavaScript, it's misused because the author doesn't understand the difference between the three formats.

---

Why is using javascript: <code> bad?

That's a leading question. It assumes that using javascript: <code> is bad.

javascript: <code> isn't bad. It's a tool. Tools aren't inherently good or bad, only the people using the tools are. You wouldn't call a hammer "bad", even if someone used it as a weapon.

javascript: <code> has some nice uses. You shouldn't use it for most cases because it's the wrong tool for the job, however if you're writing a bookmarklet, you'd be required to use the javascript: <code> format.

Additionally, there are a few niche contexts where it could make sense to leave javascript inline. An example of this would be to add a simple print button to the page:

<a href="#" onclick="window.print(); return false">Print</a>

Although even this example could be easily replaced by a class and externalizing the javascript:

<a href="#" class="print">Print</a>
<script>
     //jQuery used for brevity
     $(document).on('click', '.print', function () {
         window.print();
         return false;
     });
</script>

Answer 2

There's no real problem with using the javascript: labels. It's just considered bad style most of the time.

• an onclick-handler already is JavaScript, so repeating that is just senseless, redundant information (in fact, it's chaging the code thats executed by adding a label named javascript - but in most cases this shouldn't have any effect).
• JavaScript code in a href attribute would be placed more appropriately in an onclick handler, so you can use the href to provide a link for users that have JavaScript disabled. This is called Progressive Enhancement.

For more detailed information, you may want to take a look at this great blog-post about "The useless javascript: pseudo-protocol"