在 HTML 中嵌入 JavaScript


在 HTML 文档里嵌入客户端 JavaScript 代码有四种方法:

  • 内联,放置在 <script></script> 标签之间
  • 放置在由 <script> 标签的 src 属性指定的外部文件中
  • 放置在 HTML 事件处理程序中,该事件处理程序由 onclickonmouseover 这样的 HTML 属性值指定
  • 放在一个 URL 里,这个 URL 使用特殊的 javascript: 协议

其中后两种方法在现代 JavaScript 代码里已经很少用了,内联脚本现在也用的少了,有个编程哲学叫「Unobtrusive JavaScript」,主张内容(HTML)和行为(JavaScript)尽量分离,根据这个哲学,JavaScript 最好通过上述第二种方式嵌入。尽管如此,作为学习,我们还是将所有嵌入方式都介绍一下。

script 元素

JavaScript 代码可以以内联的形式出现在 HTML 文件里的 <script></script> 标签之间:

<script>
  // 这里是你的JavaScript代码
</script>

如果是在 XML 中,需要将 JavaScript 代码放到 CDATA 里面:

<script><![CDATA[
    // 这里是你的JavaScript代码
  ]]></script>

下面是一个简单的示例,演示 JavaScript 和 CSS 如何嵌入 HTML 文件:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>数字时钟</title>
    <script>
      // 定义一个用于显示时间的函数,每隔1s执行一次
      function displayTime() {
        var elt = document.getElementById("clock");
        var now = new Date();
        elt.innerHTML = now.toLocaleTimeString();
        setTimeout(displayTime, 1000);
      }
      window.onload = displayTime;
    </script>
    <style>
      #clock {
        font: bold 24pt sans;
        background: #ddf;
        padding: 10px;
        border: solid black 2px;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h1>数字时钟</h1>
    <span id="clock"></span>
  </body>
</html>

在浏览器中访问该 HTML 页面显示如下:

外部文件中的脚本

<script> 标签还支持 src 属性,这个属性指定包含 JavaScript 代码文件的 URL。其用法如下:

<script src="../../scripts/util.js"></script>

具有 src 属性的 <script> 标签的行为就像指定的 JavaScript 文件的内容直接出现在标签 <script></script> 之间一样。需要注意的是指定 src 属性的 <script> 标签之间没有 JavaScript 代码,结束的 </script> 标签也不能省略。

以下是 src 属性方式嵌入 JavaScript 的一些优点:

  • 可以把大块 JavaScript 代码从 HTML 文件中移除,从而简化 HTML 文件
  • 可以在多个 Web 页面共用相同的 JavaScript 代码,提高代码的复用性
  • 如果一个 JavaScript 代码文件被多个页面共享,就只需加载一次,提高页面的响应速度
  • 引入的 JavaScript 文件不限于应用所在服务器或域名,比如很多互联网广告依赖这种方式引入
  • 从其他网站载入脚本的能力,可以让我们更好地利用缓存,比如很多公共类库可以通过CDN加载

HTML 中的事件处理程序

可以通过将 JavaScript 代码放置在 HTML 属性里来定义事件处理程序,这些属性都以「on」开头,并且跟上事件名。比如,要定义用户切换表单中的复选框时调用的事件处理程序,可以为复选框的 HTML 元素属性指定处理程序代码:

<input type="checkbox" name="options" value="giftwrap" onchange="order.options.giftwrap = this.checked;">

HTML中定义的事件处理程序属性可以包含任意多条 JavaScript 语句,相互之间用逗号分隔,但是这种将 JavaScript 和 HTML 混合在一起的处理方式不是一个好的编程习惯,应该尽量避免。

URL 中的 JavaScript

在 URL 前面跟一个 javascript: 协议限定符,是另一种嵌入 JavaScript 代码到客户端的方式。这种特殊的协议类型指定 URL 内容为任意字符串,这个字符串是会被 JavaScript 解释器运行的 JavaScript 代码。javascript:URL 能识别的「资源」是转换成字符串的执行代码的返回值,如果代码返回 undefined,那么这个资源是没有内容的。

javascript:URL 可以用在任意使用常规 URL 的地方,比如 <a> 标签的 href 属性,<form> 标签的 action 属性,甚至 window.open() 方法的参数:

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

部分浏览器(Firefox、Chrome)会执行 URL 里面的代码,并使用返回的字符串作为待显示新文档的内容。但是有些浏览器(如Safari)则不支持这种语法,但是类似这样的 URL 还是支持的:

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

上面两种方式第一种会使用返回值覆盖当前文档,第二种不会,如果要确保不覆盖当前文档,可以用 void 操作符强制函数调用或给表达式赋予 undefined 值:

<a href="javascript:void window.open('about:blank');">打开一个窗口</a>

和 HTML 事件处理程序的属性一样,javascript:URL 是 Web 早期的遗物,通常都应该避免在现代 HTML 中使用。

javascript:URL 除了在 HTML 文档之外还有着重要作用:如果要测试一小段 JavaScript 代码,可以在浏览器地址栏直接输入 javascript:URL 来测试;此外,还可以用于浏览器书签,在 Web 浏览器中,「书签」就是一个保存起来的 URL。如果书签是 javascript:URL 那么保存的就是一小段脚本,叫做 bookmarkletbookmarklet 是一个小型程序,很容易就可以从浏览器的菜单或工具栏里启动,bookmarklet 里的代码执行起来就像页面上的脚本一样,可以查询和设置文档的内容、呈现和行为,只要书签不返回值,就可以操作当前显示的任何文档,而不把文档替换成新内容。


Vote Vote Cancel Collect Collect Cancel

<< 上一篇: 客户端 JavaScript 概述

>> 下一篇: JavaScript 程序的执行