JavaScript在XHTML中的用法详解


Posted in Javascript onApril 11, 2013

编写XHTML代码的规则要比编写HTML要严格得多,类似下面的代码在HTML中是有效的,但在XHTML中则是无效的。
[javascript]

<script type="text/javascript"> 
function compare(a, b) 
{ 
if(a < b) 
{ 
alert("a is less then b"); 
} 
else if(a > b) 
{ 
alert("a is greater then b"); 
} 
else 
{ 
alert("a is equal to b"); 
} 
} 
</script> 
<script type="text/javascript"> 
function compare(a, b) 
{ 
if(a < b) 
{ 
alert("a is less then b"); 
} 
else if(a > b) 
{ 
alert("a is greater then b"); 
} 
else 
{ 
alert("a is equal to b"); 
} 
} 
</script>

在HTML中,有特殊的规则用以确定<script>元素中的哪些内容可以被解析,但这些规则在XHTML中不适用。因为小于号(<)在XHTML中将被当作开始一个新标签来解析。但是作为标签,小于号后面不能跟空格,因此导致语法错误。
解决方法有两个:一、用相应的HTML实体(<)替换代码中所有的小于号(<);二、使用一个CData片段来包含JavaScript代码。
方法一相应代码:
[javascript]
<script type="text/javascript"> 
function compare(a, b) 
{ 
if(a < b) 
{ 
alert("a is less then b"); 
} 
else if(a > b) 
{ 
alert("a is greater then b"); 
} 
else 
{ 
alert("a is equal to b"); 
} 
} 
</script> 
<script type="text/javascript"> 
function compare(a, b) 
{ 
if(a < b) 
{ 
alert("a is less then b"); 
} 
else if(a > b) 
{ 
alert("a is greater then b"); 
} 
else 
{ 
alert("a is equal to b"); 
} 
} 
</script>

方法二相应代码:
[javascript]
<script type="text/javascript"><![CDATA[ 
function compare(a, b) 
{ 
if(a < b) 
{ 
alert("a is less then b"); 
} 
else if(a > b) 
{ 
alert("a is greater then b"); 
} 
else 
{ 
alert("a is equal to b"); 
} 
} 
]]></script> 
<script type="text/javascript"><![CDATA[ 
function compare(a, b) 
{ 
if(a < b) 
{ 
alert("a is less then b"); 
} 
else if(a > b) 
{ 
alert("a is greater then b"); 
} 
else 
{ 
alert("a is equal to b"); 
} 
} 
]]></script>

方法一虽然可以让代码在XHTML中正常运行,但却导致代码不好理解了;而方法二在兼容XHTML的浏览器中可以解决问题。但不少浏览器并不兼容XHTML,因而不支持CData片段。所以再使用JavaScript注释将CData标记注释掉。
相应代码:
[html]
<script type="text/javascript"> 
//<![CDATA[ 
function compare(a, b) 
{ 
if(a < b) 
{ 
alert("a is less then b"); 
} 
else if(a > b) 
{ 
alert("a is greater then b"); 
} 
else 
{ 
alert("a is equal to b"); 
} 
} 
//]]> 
</script> 
<script type="text/javascript"> 
//<![CDATA[ 
function compare(a, b) 
{ 
if(a < b) 
{ 
alert("a is less then b"); 
} 
else if(a > b) 
{ 
alert("a is greater then b"); 
} 
else 
{ 
alert("a is equal to b"); 
} 
} 
//]]> 
</script>

这种格式在所有现代浏览器中都可以正常使用。
附:不推荐使用的语法
[javascript]
<script><!-- 
function sayHi(){ 
alert("Hi!); 
} 
//--></script> 
<script><!-- 
function sayHi(){ 
alert("Hi!); 
} 
//--></script>

像上面这样把JavaScript代码包含在一个HTML注释中可以让不支持<script>元素的浏览器隐藏嵌入的JavaScript代码,即忽略<script>标签中的内容,而那些支持JavaScript的浏览器在遇到这种情况时,则必须进一步确认其中是否包含需要解析的JavaScript代码。

虽然这种注释格式得到了所有浏览器的认可,也能被正确的解释,但由于所有浏览器都已经支持JavaScript,因此也就没有必要再使用这种格式了。

Javascript 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 #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
You might like
php中用文本文件做数据库的实现方法
2008/03/27 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
javascript实现密码验证
2015/11/10 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
python3访问字典里的值实例方法
2020/11/18 Python
HTTP状态码详解
2021/03/18 杂记
德国网上药房:Apotal
2017/04/04 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
霸王洗发水广告词
2014/03/14 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
业务员辞职信范文
2015/03/02 职场文书
体育教师教学随笔
2015/08/15 职场文书
小学语文国培研修日志
2015/11/13 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
python中os.path.join()函数实例用法
2021/05/26 Python
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server