15

尝试使用 JSPX 创建 HTML 页面时，您将面临以下困难：

  • JSPX 将我们不想要的标签最小化，例如，浏览器对它的解释<div class="foo"></div>不同<div class="foo"/>
  • JSPX 标记必须关闭，而一些 HTML 标记应保持未关闭，例如<script...>. <script.../>IE 和 Firefox 无法识别自闭标签。
  • 指定 HTML5 文档类型 ( <!DOCTYPE html>)
  • 内联 JavaScript

这个问题是对其他几个问题的回答，这些问题都归结为同一个问题。我找不到全面的答案，所以我发布了我的发现结果。

相关问题：

4

2 回答 2

24

JSPX 非常适合生成 HTML 和 XHTML。

它归结为理解这种语言的 XML 特性。JSPX 是 XML，而 HTML 不是。其中一个含义是 JSPX 解析器“最小化”空标签，因为 XML 不区分自闭合标签和空标签。这会导致<script...>和<div></div>标签问题。然而，值得注意的是，虽然 JSPX 文件必须是有效的 XML，但它们产生的输出却不是. 因此，让 JSPX 文件生成 HTML（不仅仅是 XHTML）是完全正确的。事实上，您可以使用 JSPX 来生成任何文本输出，例如 CSV、CSS 或 JS，尽管这会很不方便。

考虑到上述情况，最简洁的解决方案似乎是创建一个带有 htmlScript、htmlDiv 等标签的自定义 taglib。这些标签可以这样使用：

<html:div styleClass="foo" selfClosing="false">${message}<html:div>

无论内容如何，​​它的 HTML 输出都将包含结束标记：

<div style="foo"></div>
<div style="foo">Hello</div>

像这样的 taglib 可以让您使用 JSPX 构建 HTML 页面，而无需使用相当难看的解决方法。

构建 HTML 页面似乎是 JSPX 最常见的应用之一。没有标准的 HTML 库有点令人惊讶。JSF 有一个，但如果您使用干净的 JSP，它不会帮助您。可能有一个第三方库填补了这个空白，但我找不到。

如果您不想编写自己的 taglib，另一种方法是使用 CDATA：

<![CDATA[<script type="text/javascript" src="/js/jquery-1.4.4.min.js">]]>

或者：

<![CDATA[<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>]]>

相关问题中的其他建议是在<jsp:text>内部添加评论或空白<script>，结果相同：

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"><!-- Prevent self-closing --></script>

（正如 Ralph 指出的，上述内容不适用于 WebSphere）或：

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"><jsp:text></jsp:text></script>

CDATA 在其他一些情况下也会派上用场。其中之一是打印 HTML5 doctype ( <!DOCTYPE html>)。JSPX 不允许您将 DOCTYPE 声明放在文档中，因为它不是有效的 XML。JSPX 还定义了 jsp:output 标记，但即使它为空，它也会打印 SYSTEM 属性。一种解决方法是在页面开头将 DOCTYPE 包装在 CDATA 中：

<![CDATA[<!DOCTYPE html>]]>

CDATA 也可用于封装内联 JavaScript。虽然这会因为“<”符号而产生解析错误：

<script type="text/javascript">
    var x = 7 < 5;
</script>

这将正常工作： 

<script type="text/javascript">
    <![CDATA[
    var x = 7 < 5;
    ]]>
</script>

请注意，JSPX 中的 CDATA 会按原样输出所有内容，但仍会评估 EL 表达式。因此如下：

<![CDATA[
<jsp:expression>"asd " + "def"</jsp:expression>
${1 + 2}
]]>

产生：

<jsp:expression>"asd " + "def"</jsp:expression>
3

希望这可以帮助 ：）

于 2011-01-09T14:32:38.817 回答
0

推荐的方法是：

<script type="text/javascript">

//<![CDATA[

    //your javascript goes here
    function myFuncy(){
        if( a > b || a >= b && b && c){
            X;
        }
    }

//]]>

</脚本>

于 2014-03-26T15:07:52.020 回答