JavaScript中的noscript元素属性位置及作用介绍


Posted in Javascript onApril 11, 2013

一、<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 style="color:red; font-size:26px;">本页面需要浏览器支持(启用)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 style="color:red; font-size:26px;">本页面需要浏览器支持(启用)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 相关文章推荐
jQuery前台数据获取实现代码
Mar 16 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
微信小程序中使用echarts的实现方法
Apr 24 Javascript
Vue+Django项目部署详解
May 30 Javascript
javascript标签在页面中的位置探讨
Apr 11 #Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 #Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 #Javascript
在javascript中对于DOM的加强
Apr 11 #Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 #Javascript
在javascript中关于节点内容加强
Apr 11 #Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 #Javascript
You might like
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python数据类型学习笔记
2016/01/13 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
Python求凸包及多边形面积教程
2020/04/12 Python
python 实现端口扫描工具
2020/12/18 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
C语言中break与continue的区别
2012/07/12 面试题
中专生毕业自我鉴定
2013/11/01 职场文书
小摄影师教学反思
2014/04/27 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
初婚初育证明范本
2014/11/24 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
SQL Server 中的事务介绍
2022/05/20 SQL Server
JS函数式编程实现XDM一
2022/06/16 Javascript