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 attr方法获取input的checked属性问题
May 26 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
JS通过位运算实现权限加解密
Aug 14 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 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
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
jQuery实现增删改查
2020/12/22 jQuery
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
python实现对变位词的判断方法
2020/04/05 Python
高级护理专业大学生求职信
2013/10/24 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
护士自荐信范文
2015/03/25 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技