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 相关文章推荐
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
vue 页面跳转的实现方式
Jan 12 Vue.js
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
一个PHP的String类代码
2010/04/20 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
python线程的几种创建方式详解
2019/08/29 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
教师的实习鉴定
2013/12/15 职场文书
主管会计岗位责任制
2014/02/10 职场文书
志愿者服务感言
2014/02/27 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
社会调查研究计划书
2014/05/01 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
Spring Boot 实现 WebSocket
2022/04/30 Java/Android