为什么要使用“javascript:< code>”坏? [英] Why is using "javascript: <code>" bad?

查看:135
本文介绍了为什么要使用“javascript:< code>”坏?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述


可能存在重复:

您是否需要在onclick中指定javascript?


要在DOM事件上执行JavaScript,可以使用下面的代码:

 < div onclick =alert('Alert');> Alert< / div> 



<

 < div onclick =javascript:alert('Alert'); > Alert< / div> 

然而,我听说第二个例子是不好,第一个例子应该用在第二个例子。



这是不好的?如果是这样,为什么这不好? alert('Alert') javascript:alert('Alert')



如何在< a> 标记中使用它(如果它有任何不同)?

 < a href =javascript:alert('Alert');>警报< / a> b 


编辑:特别是javascript> 部分,而不是如何将内联JavaScript与我的标记混合在一起。对于这种混淆抱歉。

解决方案

哦,这个奇妙的JavaScript混淆世界。您发布的代码可能并不适合大多数程序员认为正在执行的操作。 以下每行之间存在差异:

 < a onclick =alert('Hello World!')...>示例< / a> // V1 
< a href =javascript:alert('Hello World!')...>示例< / a> // V2

尽管它们都会提醒 Hello World! $ b

第一个(V1)内嵌点击事件,通过 [onclick] 属性。它还可能包含 [href] 属性,该属性在 [onclick] 属性执行后导航到另一个位置,或者任何数量的其他点击事件绑定在代码中,假设默认行为未被阻止。



秒(V2)的可执行 javascript: url设置为 [href] 属性。它还可能包含外部脚本中绑定的 [onclick] 属性或其他点击事件。



第一个和第二个示例(V1和V2)具有相同的代码执行,即:

  alert('Hello World!')

第三个例子(V3) c $ c>点击通过 [onclick] 属性绑定事件,就像V1一样,但是正在执行的代码是不同的。执行的代码是:

  javascript:alert('Hello World')

尽管它看起来像一个 javascript: url,但实际上只是在javascript中使用了一个标签。 p>

JavaScript中的标签可用于跳过嵌套循环,如以下示例代码所示:

对于(j = 0; j <5; j ++){
console),标记为$(i = 0; i <5; i ++){//标记为
。 log(i,j);
if(i === 2&& j === 3){
break label; //此循环跳出循环
}
}
}

在大多数内联JavaScript中,它被滥用,因为作者不了解这三种格式之间的区别。







为什么要使用 javascript:< code> bad?


这是一个主要问题。它假设使用 javascript:< code> 坏的。

javascript:< code> 并不坏 。这是一个工具。工具本质上并非好或坏,只有使用工具的人才是。即使有人用它作为武器,你也不会称它为坏。

javascript:< code> 有一些不错的用途。你不应该在大多数情况下使用它,因为它是工作的错误工具,但是如果你正在写一个书签,您需要使用 javascript:< code> 格式。



<另外,还有一些利基环境,它可以让javascript内联。一个例子是在页面中添加一个简单的 print 按钮:

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

尽管这个例子可以很容易地被一个类取代,并将javascript的外部化:

 < a href =#class =print>列印< / a> 
< script>
//用于简洁的jQuery
$(document).on('click','.print',function(){
window.print();
return false ;
});
< / script>


Possible Duplicate:
Do you ever need to specify javascript: in an onclick?

To execute JavaScript on a DOM event, you could use something like this:

<div onclick="alert('Alert');">Alert</div>​

Something like this seems to work as well:

<div onclick="javascript: alert('Alert');">Alert</div>​

However, I've heard that the second example is "bad" and that the first example should be used over the second.

Is this bad? If so, why is this bad? What is the difference between alert('Alert') and javascript: alert('Alert')?

What about using it in <a> tags (if it is any different)?

<a href="javascript: alert('Alert');">Alert</a>

Edit: To clarify, I am asking about the javascript: part specifically, and not how I have inline JavaScript mixed in with my markup. Sorry about the confusion.

解决方案

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>

这篇关于为什么要使用“javascript:&lt; code&gt;”坏?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆