JavaScript中的noscript元素属性位置及作用介绍
JavaScript中的noscript元素属性位置及作用介绍
发布时间:2016-12-30 来源:查字典编辑
摘要:一、元素属性向XHTML页面中插入JavaScript的主要方法,就是使用元素,该元素有5个属性分别为charset、defer、langu...

一、<script>元素属性

向XHTML页面中插入JavaScript的主要方法,就是使用<script>元素,该元素有5个属性分别为charset、defer、language、src、type,经常使用的是type、src、defer这三个。

1、type属性的值一般都是text/javascript,该属性是必须的,<script type=”text/javascript”/>。

2、src属性的值是*.js外部文件,该属性是可选的,<script type=”text/javascript” src=”example.js”/>。

在这个例子中,外部文件example.js将被加载到当前页面中。外部文件只需包含通常要放在开始的<script>和结束的</script>之间的那些Javascript代码即可。与解析嵌入式Javascript代码一样,在解析外部Javascript文件时,页面的处理也会暂时的停止。需要注意的是带有src属性后就不应该在<script>和</script>之间再包含额外的Javascript代码。

3、defer属性的值是”defer”,表示脚本可以延迟到文档完全被解析和显示之后再执行,该属性是可选的,<script type=”text/javascript” src=”example.js” defer=”defer”/>

二、标签位置

按照惯例,所有<script>元素都应该放在页面的<head>元素中,例如:

复制代码 代码如下:

<html>

<head>

<title></tilte>

<script type=”text/javascript” src=”example.js”/>

</head>

<body>

</body>

</html>

现代Web应用程序一般都把全部Javascript引用放在<body>元素中,放在页面的内容后面目的是让用户感觉到页面加载速度快了,如下所示:

复制代码 代码如下:

<html>

<head>

<title></tilte>

</head>

<body>

<>

<script type=”text/javascript” src=”example.js”/>

</body>

</html>

三、延迟脚本

使用defer属性延迟脚本,这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后在运行。

复制代码 代码如下:

<html>

<head>

<title></tilte>

<script type=”text/javascript” src=”example.js” defer=”defer”/>

</head>

<body>

</body>

</html>

在这个例子中,虽然我们把<script>元素放在了文档的<head>元素中,但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。

四、CDATA

在XHTML(XML)中,CData片段是文档中的一个特殊区域,这个区域中可以包含不需要解析的任意格式的文本内容。因此,在CData片段中就可以使用任意字符,而且不会导致语法错误。

复制代码 代码如下:

<script>

// <![CDATA[

function compare(a,b){

if(a<b){

alert(“A is less than B”) ;

}else if(a>b){

alert(“A is greater than B”) ;

}else {

alert(“A is equal to B”) ;

}

}

//]]>

</script>

加入双斜线注释是为了解决浏览器不兼容XHTML的问题。

五、<noscript>元素

当浏览器不支持Javascript或者Javascript被禁用时,包含在<noscript>中的元素才会显示出来,否则得话尽管页面中包含<noscript>,但其中的内容并不会被显示。

如下所示:

复制代码 代码如下:

<html>

<head>

<title></tilte>

<script type=”text/javascript” src=”example.js” defer=”defer”/>

</head>

<body>

<noscript>

<p>本页面需要浏览器支持(启用)Javascript。</p>

</noscript>

</body>

</html>

这个页面会在脚本无效的情况下向用户显示一条消息。而在启用了脚本的浏览器中,用户永远也不会看到它——尽管它是页面的一部分。

复制代码 代码如下:

<html>

<head>

<title>Example HTML Page</title>

</head>

<body>

<noscript>

<center><p>本页面需要浏览器支持(启用)JavaScript</p></center>

</noscript>

<>

<script type="text/javascript">

alert(1);

</script>

</body>

</html>

复制代码 代码如下:

<html>

<head>

<title>Example HTML Page</title>

</head>

<body>

<noscript>

<center><p>本页面需要浏览器支持(启用)JavaScript</p></center>

</noscript>

<>

<script type="text/javascript">

alert(1);

</script>

</body>

</html>

在以下两种情况下,上述代码<p>标记中的内容会显示出来:

•浏览器不支持脚本

•浏览器支持脚本,但脚本被禁用。

除此之外,用户在浏览器中永远看不到<noscript>标记中的内容。

六、小结

把Javascript插入到XHTML中要使用<script>元素。使用这个元素可以把Javascript嵌入到XHTML页面中,让脚本与标记混合在一起;也可以包含外部的Javascript文件。而我们需要注意的有:

1、这两种方式都要求吧type属性的值设置为text/javascript,以表明使用的是Javascript脚本语言。

2、在包含外部Javascript文件时,必须将src属性设置为指向相应文件的url。而这个文件即可以好是与包含它的页面位于同一个服务器上的文件,也可以是其他任何域中的文件。

3、所有<script>元素会按照他们在页面中出现的先后顺序依次被解析。只有在解析完前一个<script>代码后才会解析下一个<script>代码。

4、浏览器在呈现后面的页面内容之前,必须先解析完前面<script>元素中的代码。为此,一般要把<script>元素放在页面的末尾,放在页面内容之后和结束的</body>标签之前。

5、在IE和火狐中,可以通过设置defer属性让浏览器在呈现完文档之后再执行脚本。其他浏览器不支持该属性。

另外,使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下,浏览器不会显示<noscript>元素中的任何内容。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类