HTML 脚本

2018-01-12 15:29 更新

HTML脚本


script元素可以包括您的页面中的脚本,在文档中内联定义或引用外部文件。

最常用的脚本类型是JavaScript。

对每个脚本使用一个script元素。

script元素具有局部属性: type,src,defer,async,charset

script 元素的开始和结束标记是必需的;即使引用外部JavaScript库时,也不允许使用自关闭标记。

在HTML5中, type 属性是可选的。在HTML5中添加了 async defer 属性。

  • type - 指定引用或定义的脚本的类型。对于JavaScript脚本,可以省略此属性。
  • src - 指定外部脚本文件的URL。
  • defer - 指定如何执行脚本。这些属性只能与src属性结合使用。
  • async - 指定如何执行脚本。这些属性只能与src属性结合使用。
  • charset - 指定外部脚本文件的字符编码。此属性只能与src属性结合使用。

内联脚本

HTML页面中的JavaScript语句包含内联脚本。

<!DOCTYPE HTML>
<html>
<head>
<script>
    document.write("This is from the script");
</script>
</head>
<body>
   <p>This is a test.</p>
   <a href="http://www.w3cschool.cn">Visit  www.w3cschool.cn</a>
</body>
</html>

默认情况下,脚本在页面中遇到时立即执行。您通常使用 head 元素中的 script 元素,但您可以在HTML文档中的任何位置使用它。

外部脚本

您可以将脚本分成单独的文件,并使用script元素加载它们。

假设我们有一个名为 simple.js 的文件,其内容如下面代码所示。

document.write("This is from  the   external script");

该文件包含单个语句。然后,我们可以使用script元素中的 src 属性来引用此文件。

如果使用 src 属性,则脚本元素必须为空。您不能使用相同的脚本元素来定义内联脚本和外部脚本。

以下代码显示如何使用外部脚本。

<!DOCTYPE HTML>
<html>
<head>
   <script src="simple.js"></script>
</head>
<body>
    <p>This is a test.</p>
    <a href="http://www.w3cschool.cn">Visit  www.w3cschool.cn</a>
</body>
</html>

src 属性的值是要加载的脚本文件的URL。 simple.js 文件与HTML文件位于同一目录中。

需要脚本元素的结束标记,即使元素没有内容。如果在引用外部脚本时使用自动关闭标记,浏览器将忽略该元素,而不加载文件。

延迟脚本

你可以通过使用 async defer 属性来控制脚本的执行。

defer 属性指示浏览器在页面加载和解析之前不执行脚本。

要了解defer属性的好处,让我们看看它解决的问题。

假设 simple2.js 脚本文件具有如下所列的单个语句。

document.getElementById("myID").innerText = "myValue";

当此脚本运行时,它将找到一个 id 属性值为 myID 的元素,并将该元素的内部文本更改为 myValue

以下HTML文档使用script元素引用脚本文件。

<!DOCTYPE HTML>
<html>
<head>
   <script src="simple2.js"></script>
</head>
<body>
   <p id="myID">This is a test.</p>
</body>
</html>

浏览器遇到script元素时的默认行为是停止处理HTML文档时,加载脚本文件并执行其内容。

这意味着浏览器在解析其余HTML之前加载并执行simple2.js中的语句,并发现了 p 元素。

脚本找不到所需的元素,因此不应用任何更改。

脚本完成后,浏览器继续解析HTML,并找到 p 元素。

要解决这个问题,请将script元素放在文档的末尾。

<!DOCTYPE HTML>
<html>
<body>
  <p id="myID">This is a test.</p>
  <a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a>
  <script src="simple2.js"></script>
</body>
</html>

defer属性

在HTML5中,您可以通过使用 defer 属性来实现相同的效果。当浏览器遇到具有defer属性的脚本时,它会阻止加载和执行脚本,直到HTML文档中的所有元素都已解析为止。

<!DOCTYPE HTML>
<html>
<head>
   <script defer src="simple2.js"></script>
</head>
<body>
   <p id="myID">This is a test.</p>
   <a href="http://www.w3cschool.cn">www.w3cschool.cn</a>
</body>
</html>

您可以仅对外部脚本文件使用 defer 属性。它不工作的内联脚本。

异步脚本

遇到script元素时的默认浏览器行为是在加载和执行脚本时停止处理页面。

每个script元素按照它们定义的顺序同步执行,当脚本加载和运行时,不会发生其他事情。

您可以使用async 属性来提高性能。例如,可以异步地执行不与HTML文档中的元素交互的自包含脚本。

当您使用 async 属性时,浏览器会异步加载和执行脚本,同时继续解析HTML中的其他元素,包括其他脚本元素。

以下代码显示了应用于脚本元素的 async 属性。

<!DOCTYPE HTML>
<html>
<head>
   <script async  src="simple2.js"></script>
</head>
<body>
    <p>This is a test.</p>
    <a href="http://www.w3cschool.cn">www.w3cschool.cn</a>
</body>
</html>

注意

具有async 属性的脚本可能不会按照它们的定义顺序执行。

这使得async特性不适用于依赖于由其他脚本定义的函数或值的脚本。

noscript元素

noscript 元素允许您向其显示内容已禁用JavaScript或正在使用浏览器的用户不支持它。

noscript 元素显示内容和说明,除非他们启用JavaScript,否则他们不能使用您的网站或网页。

以下代码显示了设置为显示简单消息的noscript 元素。

<!DOCTYPE HTML>
<html>
<head>
<script defer src="simple2.js"></script>
<noscript>
    <h1>Javascript is required!</h1>
    <p>You  cannot use  this page  without Javascript</p>
</noscript>
</head>
<body>
   <p>This is a test.</p>
   <a href="http://www.w3cschool.cn">Visit  www.w3cschool.cn</a>
</body>
</html>

页面的其余部分正常处理,内容元素仍然显示。

您可以向页面添加多个noscript元素。

如果不支持JavaScript,您还可以将用户的浏览器重定向到其他网址,方法是将meta元素放在noscript元素中。

<!DOCTYPE HTML>
<html>
<head>
<script defer src="simple2.js"></script>
<noscript>
   <meta http-equiv="refresh"  content="0; http://www.www.w3cschool.cn"/>
</noscript>
</head>
<body>
   <p>This is a test.</p>
   <a href="http://www.w3cschool.cn">www.w3cschool.cn</a>
</body>
</html>

当不支持JavaScript或禁用JavaScript的浏览器时,这会将用户重定向到www.w3cschool.cn网站。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号