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 相关文章推荐
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
微信小程序如何获取地址
Dec 24 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
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设计模式之结构模式的深入解析
2013/06/13 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
python实现人人网登录示例分享
2014/01/19 Python
python排序方法实例分析
2015/04/30 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
python 如何设置守护进程
2020/10/29 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
个人整改措施书面材料
2014/10/24 职场文书
医德医风学习心得体会
2016/01/25 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python