如何在XHTML中使用JavaScript

如何在XHTML中使用JavaScript

作者：坚果

公众号："大前端之旅"

华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

可扩展超文本标记语言（XHTML, Extensible HyperText Markup Language）是将HTML作为XML的应用重新包装的结果。与HTML不同，在XHTML中使用JavaScript必须指定type属性且值为text/javascript, HTML中则可以没有这个属性。

在XHTML中编写代码的规则比HTML中严格，这会影响使用<script>标签嵌入JavaScript代码。下面的代码块虽然在HTML中有效，但在XHML中是无效的。

<script type="text/javascript">
    function compare(a, b) {
        if (a < b) {
            console.log("a的值比b的值小");
        } else if (a > b) {
            console.log("a的值比b的值大");
        } else {
            console.log("a的值与b的值相等");
        }
    }
</script>

在HTML中，解析<script>标签会应用特殊规则。XHTML中则没有这些规则。这意味着a < b语句中的小于号（<）会被解释成一个标签的开始，并且由于作为标签开始的小于号后面不能有空格，这会导致语法错误。避免XHTML中这种语法错误的方法有两种。第一种是把所有小于号（<）都替换成对应的HTML实体形式（<）。结果代码就是这样的：

<script type="text/javascript">
    function compare(a, b) {
        if (a &lt; b) {
            console.log("a的值比b的值小");
        } else if (a &gt; b) {
            console.log("a的值比b的值大");
        } else {
            console.log("a的值与b的值相等");
        }
    }
</script>

这样代码就可以在XHTML页面中运行了。不过，缺点是会影响阅读。好在还有另一种方法。第二种方法是把所有代码都包含到一个CDATA块中。在XHTML（及XML）中，CDATA块表示文档中可以包含任意文本的区块，其内容不作为标签来解析，因此可以在其中包含任意字符，包括小于号，并且不会引发语法错误。使用CDATA的格式如下：

<script type="text/javascript">
    <![CDATA[
        function compare(a, b) {
            if (a < b) {
                console.log("a的值比b的值小");
            } else if (a > b) {
                console.log("a的值比b的值大");
            } else {
                console.log("a的值与b的值相等");
            }
        }
    ]]>
</script>

在兼容XHTML的浏览器中，这样能解决问题。但在不支持CDATA块的非XHTML兼容浏览器中则不行。为此，CDATA标记必须使用JavaScript注释来抵消：

<script type="text/javascript">
    //<![CDATA[
    function compare(a, b) {
        if (a < b) {
            console.log("a的值比b的值小");
        } else if (a > b) {
            console.log("a的值比b的值大");
        } else {
            console.log("a的值与b的值相等");
        }
    }
    //]]>
</script>

这种格式适用于所有现代浏览器。虽然有点黑科技的味道，但它可以通过XHTML验证，而且对XHTML之前的浏览器也能优雅地降级。

XHTML 模式会在页面的 MIME 类型被指定为"application/xhtml+xml"时触 发。并不是所有浏览器都支持以这种方式送达的 XHTML

参考文章

《JavaScript高级程序设计》