Как создать допустимый HTML с JSPX? (не XHTML)

При попытке создать HTML-страницу с JSPX вы столкнетесь со следующими трудностями:

JSPX минимизирует теги, которые нам не нужны, например <div class="foo"></div> становится <div class="foo"/>, который по-разному интерпретируется браузерами
Теги JSPX должны быть закрыты, а некоторые HTML-теги должны оставаться закрытыми, например <script...>. Самозакрывающийся тег <script.../> не распознается IE и Firefox.
Указание документа HTML5 (<!DOCTYPE html>)
Встроенный JavaScript

Этот вопрос является ответом на несколько других, которые все сводятся к одной и той же проблеме. Я не мог найти исчерпывающий ответ, поэтому я публикую результаты моих исследований.

Похожие вопросы:

Ответ 1

JSPX отлично подходит для создания как HTML, так и XHTML.

Это сводится к пониманию характера XML этого языка. JSPX - это XML, а HTML - нет. Одно из последствий заключается в том, что парсер JSPX "сводит к минимуму" пустые теги, поскольку XML не делает различий между самозакрывающимися тегами и пустым тегом. Это вызывает проблемы с тегами <script...> и <div></div>. Однако стоит отметить, что, хотя файлы JSPX должны быть действительными XML, вывод, который они создают, не. Таким образом, совершенно правильно иметь файл JSPX, создающий HTML (а не только XHTML). Фактически, вы можете использовать JSPX для создания любого текстового вывода, такого как CSV, CSS или JS, хотя это было бы довольно неудобно.

Учитывая вышеизложенное, самое чистое решение, похоже, создает пользовательский taglib с тегами, такими как htmlScript, htmlDiv и т.д. Эти теги можно использовать следующим образом:

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

Его вывод HTML будет содержать закрывающий тег независимо от содержимого:

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

Подобный taglib позволит вам создавать HTML-страницы с JSPX без использования довольно уродливых обходных решений.

Построение 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>

(как заметил Ральф, вышеописанное не работает с WebSphere) или:

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

CDATA также пригодится в нескольких других случаях. Одним из них является печать документа типа HTML5 (<!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>

Обратите внимание, что CDATA в JSPX выводит все как есть, но все еще оценивает выражения EL. Таким образом, следующее:

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

дает:

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

Надеюсь, что это поможет:)

Ответ 2

Рекомендуемый способ:

< script type = "text/javascript" >

//<! [CDATA [

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

//]] >

</script>