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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
vue 解决provide和inject响应的问题
Nov 12 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
Terran剧情介绍
2020/03/14 星际争霸
PHP中如何定义和使用常量
2013/02/28 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
玩转方法:call和apply
2014/05/08 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
javascript如何写热点图
2015/12/08 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
python3人脸识别的两种方法
2019/04/25 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
公司董事长职责
2013/12/12 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
速龙x4-860k处理器相当于i几
2022/04/20 数码科技