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 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 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-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python2与python3共存问题的解决方法
2018/09/18 Python
详解python中@的用法
2019/03/27 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
django修改models重建数据库的操作
2020/03/31 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
python speech模块的使用方法
2020/09/09 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
司法助理专业自荐书
2014/06/13 职场文书
刑事和解协议书范本
2014/11/19 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers