JavaScript代码嵌入网页的方法

课后整理 2020-12-20

下面简单介绍另外两种把JavaScript代码嵌入网页的方法。

事件属性

大部分HTML标签的事件属性(如onclick和onmouseover),可以允许写入JavaScript代码。当指定事件发生时,就会调用这些代码。例如:

<div  onclick="alert('Hello')"></div>

上面的事件属性代码只有一个语句。如果有多个语句,用分号分隔即可。

URL协议

URL支持javascript:协议,调用这个URL时,就会执行JavaScript代码。例如:

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

浏览器的地址栏也可以执行javascipt:协议。将javascript:alert('Hello')放入地址栏,按回车键,就会跳出提示框。

如果JavaScript代码返回一个字符串,浏览器就会新建一个文档,展示这个字符串的内容,原有文档的内容都会消失。例如:

<a  href="javascript:new Date().toLocaleTimeString();">
    现在时间?
</a>

在上面代码中,用户点击链接以后,会打开一个新文档,里面有当前时间。

如果返回的不是字符串,那么浏览器不会新建文档,也不会跳转。例如:

<a  href="javascript:console.log(new Date().toLocaleTimeString())">
    现在时间?
</a>

在上面代码中,用户点击链接后,网页不会跳转,只会在控制台显示当前时间。

javascript:协议的常见用途是书签脚本Bookmarklet。由于浏览器的书签保存的是一个网址,所以javascript:网址也可以保存在里面,用户选择这个书签的时候,就会在当前页面执行这个脚本。为了防止书签替换掉当前文档,可以在脚本最后返回void 0。