Sealyu

--- 博客已迁移至: http://www.sealyu.com/blog

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  618 随笔 :: 87 文章 :: 225 评论 :: 0 Trackbacks
今天在xhtml中使用javascript时一直报错,后来才发现在xhtml中javacript里使用'<' '&'是不合法的。

Making JavaScript Compatible with XHTML

XHTML is subject to the same syntactical rules as XML. Because of this, an XHTML processor treats the characters < and & as markup, even if they reside inside a <script> block. Since the < and & characters are also used by the JavaScript language, this creates a conflict. When an XHTML processor sees these characters within the JavaScript code of a <script> block, it attempts to parse the JavaScript code as if it were markup, which causes the XHTML parser to fail.

You can get around this conflict and make all JavaScript code compatible with XHTML by placing the JavaScript code within a CDATA section. A CDATA section in XML/XHTML starts with the characters <![CDATA[ and ends with the characters ]]>.

Any characters within the starting and ending element of a CDATA section are not treated by the XML/XHTML processor as markup, thus preventing a conflict.

Here is an example of how to declare JavaScript code within a CDATA section so that it is compatible with XHTML:

<script type="text/javascript">
//<![CDATA[

alert("<This is compatible with XHTML>");

//]]>
</script>

Note that JavaScript source code must be placed within the opening and closing elements of the CDATA section. The CDATA section itself should be commented out with a JavaScript single-line comment // as in the example above. This is so that the JavaScript interrupter does not interpret the CDATA markup as JavaScript, which would cause a JavaScript error.

JavaScript code that is imported into an XHTML document from an external source file is always compatible with XHTML. So, for example, any code you place into the external file external.js and import into an XHTML file via the src attribute of the <script> tag will be valid. Here is an example of how to import the file external.js:

<script type="text/javascript" src="external.js"></script>

在XHTML文档中合适的使用CSS和JavaScript

XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) 定义XHTML是为了把HTML 4扩展成像XML 1.0一样的应用程序。

在许多站点中XHTML正在迅速的替代HTML 4;然而,主流浏览器对完全支持XHTML方面表现得不足,和网页设计师对HTML 4与XHTML的基本差异缺乏理解,产生了当今网络上的一个不断扩大的问题。

XHTML是XML,不是HTML

其中关于XHTML的主要的误解是,它仅仅是另外一个版本的HTML。这个误解产生于这样的事实:Microsoft® Internet Explorer只在文件以Mime类型为 text/html提交时,才支持XHTML,而标准中建议的类型其实是application/xhtml+xml

当一个XHTML页面的MIME类型被提交为text/html时,它被所有的浏览器当作HTML处理,就好像XHTML比起HTML来没有任何不同。但是当一个XHTML页面的MIME类型被提交为text/xmlapplication/xhtml+xml时,它将被当作XML文档处理,而设计和显示XML都是必须要遵守严格规则的。

真正的XHTML就是一个XML的应用,所以创建XHTML时也要遵守严格的规则。特别是:

  1. 未经过处理的<&不允许出现在CDATA区域(<!CDATA...>)之外。
  2. 注释(<!—— ... ——>)中不能包含双横线。
  3. 包含在注释(<!—— ... ——>)中的内容将被忽略。

在内嵌的stylescript中出现的问题

在被当作XML而不是HTML处理时,内嵌的style和script标记会产生几个不同的问题。

JavaScript中包含了一些在XHTML中不允许存在的字符

典型的JavaScript中包含了一些特殊字符,这些字符在XHTML中是不允许放在CDATA区域之外的。

<script type="text/javascript">

var i = 0;



while (++i < 10)

{

// ...

}

</script>

注意这个例子不是以正确格式书写的XHTML,因为使用了未经处理的“<”,它只能在被当作XHTML或XML标记的一部分时出现。

在内嵌的stylescript中使用注释

熟悉HTML的设计师通常把内嵌的stylescript内容放到注释中,这样可以在不支持样式和脚本的浏览器中隐藏它们。

<style type="text/css">

<!--

body {background-color: blue; color: yellow;}

-->

</style>

<script type="text/javascript">

<!--

var i = 0;

var sum = 0;



for (i = 0; i < 10; ++i)

{

sum += i;

}

alert('sum = ' + sum);

// -->

</script>

这个例子举例说明了特定的浏览器可以忽略注释里的内容。另外,这个例子还显示了不同的浏览器在处理text/xml或者 application/xhtml+xml内容时产生的不同问题。

Mozilla 1.1+/Opera 7
不能使用CSS,也不能执行JavaScript。
Netscape 7.0x/Mozilla 1.0.x
不能使用CSS,但可以执行JavaScript。
Internet Explorer 5.5+
无法正常显示文档。

包含双横线的内嵌stylescript

另一个把JavaScript包含在XHTML文件的注释中产生的问题,与在XHTML的注释中使用双横线会产生的问题一样。

<script type="text/javascript">

<!--

var i;

var sum = 0;



for (i = 10; i > 0; --i)

{

sum += i;

}

// -->

</script>

使用CDATA替代注释

直接把JavaScript放入CDATA区域会在低版本不支持XML的浏览器中产生问题,不过,把JavaScript的注释(//……)与CDATA一起使用,就能解决向下兼容的问题了。

<script type="text/javascript">

//<![CDATA[

var i = 0;



while (++i < 10)

{

// ...

}

//]]>

</script>

例子

在注释中使用内嵌style的CSS规则

例子1 - XHTML 1.0 Strict在text/html
这个例子举例说明当CSS规则包含内联和包含在注释中时的XHTML在text/html的行为。这个例子支持Netscape 7.x,Mozilla,Opera 7和Internet Explorer 5.5+那一个都能像期望一样应用CSS规则。
例子2 - XHTML 1.0 Strict在text/xml
这个例子举例说明当CSS规则包含内联和包含在注释中时的XHTML在text/xml的行为。这个例子支持Netscape 7.x,Mozilla,Opera 7但不支持Internet Explorer 5.5+。注意etscape 7.x,Mozilla和Opera同意包含在注释的内联CSS规则将被忽略。
例子3 - XHTML 1.0 Strict在application/xhtml+xml
这个例子举例说明当CSS规则包含内联和包含在注释中时的XHTML在application/xhtml+xml的行为。这个例子支持Netscape 7.x,Mozilla,Opera 7但不支持Internet Explorer 5.5+。注意etscape 7.x,Mozilla和Opera同意包含在注释的内联CSS规则将被忽略。

使用外部文件的CSS规则

例子4 - XHTML 1.0 Strict在text/html
这个例子举例说明当在使用外部文件的CSS规则的时候XHTML在text/html的行为。这个例子支持Netscape 7.x,Mozilla,Opera 7和Internet Explorer 5.5+。
例子5 - XHTML 1.0 Strict在text/xml
这个例子举例说明当在使用外部文件的CSS规则的时候XHTML在text/xml的行为。这个例子支持Netscape 7.x,Mozilla和Opera 7但不支持不支持Internet Explorer 5.5+
例子6 - XHTML 1.0 Strict在application/xhtml+xml
这个例子举例说明当在使用外部文件的CSS规则的时候XHTML在application/xhtml+xml的行为。这个例子支持Netscape 7.x,Mozilla和Opera 7但不支持不支持Internet Explorer 5.5+

建议

不要在XHTML中内联stylescript

用外部文件包含CSS规则和JavaScript来替换内联样式和脚本是创建XHTML最佳方式,在向后兼容方式时,如果内容的MIME类型从text/htmlapplication/xhtml+xml改变时将不会被打断。

这个建议可能看起来更强烈,可是,它是未来XHTML要打算的问题,当XHTML在text/htmlapplication/xhtml+xml转移在几年后发生。

如果你仅仅测试你的XHTML在text/html的时候,那么你可能产生问题,例如像:不能准确的描述出主题。移动CSS和JavaScript到单独的文件是可靠的方法,关于改变你XHTML的服务方式。

理解XHTML 1.0的HTML兼容指导

这个XHTML 1.0 HTML Compatibility Guidelines帮助创建XHTML文档向后兼容性在那些不能理解XML的老浏览器。

请注意那是纯粹的XHTML文档,你不需要使用xml-stylesheet处理指导,但应该使用link涉及的外部文件包含CSS。



另外,附XHTML的一些规范:
1.所有的标记都必须要有一个相应的结束标记
以前在 HTML 中,你可以打开许多标签,例 如 <p> 和 <li> 而不一定写对应的 </p> 和 </li> 来关闭它们.但 在 XHTML 中这是不合法的.XHTML要求有严谨的结构,所有标签必须关闭.如果是单独不成对的标签,在标签最后加一个 "/" 来关闭它.例如:
<br /><img height="80" alt="网页设计师" src="http://images/logo_w3cn_200x80.gif"&n ... 00" /> 

2.所有标签的元素和属性的名字都必须使用小写
与 HTML 不 一样,XHTML 对大小写是敏感的,<title> 和 <TITLE> 是不同的标签.XHTML 要求所有的标签和属性的 名字都必须使用小写.例如:<BODY> 必须写成 <body> .大小写夹杂也是不被认可的,通 常 dreamweaver 自动生成的属性名字 "onMouseOver" 也必须修改成 "onmouseover".

3.所有的 XML 标记都必须合理嵌套
同样因为 XHTML 要求有严谨的结构,因此所有的嵌套都必须按顺序,以前我们这样写的代码:
<p><b></p></b> 
必须修改为:
<p><b></b></p> 
就是说,一层一层的嵌套必须是严格对称.

4.所有的属性必须用引号 "" 括起来
在 HTML 中,你可以不需要给属性值加引号,但是在 XHTML 中,它们必须被加引号.例如:
<height=80> 
必须修改为:
<height="80"> 
特殊情况,你需要在属性值里使用双引号,你可以用 ",单引号可以使用 &apos;,例如:
<alt="say&apos;hello&apos;"> 


5.把所有 < 和 & 特殊符号用编码表示
任何小于号(<),不是标签的一部分,都必须被编码为 &lt;
任何大于号(>),不是标签的一部分,都必须被编码为 &gt;
任何与号(&),不是实体的一部分的,都必须被编码为 &amp;

6.给所有属性赋一个值
XHTML 规定所有属性都必须有一个值,没有值的就重复本身.例如:
<td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 
必须修改为:
<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked" /> 

7.不要在注释内容中使用 "--","--" 只能发生在 XHTML 注释的开头和结束,也就是说,在内容中它们不再有效.例如下面的代码是无效的:
<!--这里是注释-----------这里是注释--> 
用等号或者空格替换内部的虚线:
<!--这里是注释============这里是注释--> 

以上这些规范有的看上去比较奇怪,但这一切都是为了使我们的代码有一个统一、唯一的标准,便于以后的数据再利用.

posted on 2009-05-13 14:28 seal 阅读(896) 评论(0)  编辑  收藏 所属分类: Javascript

只有注册用户登录后才能发表评论。


网站导航: