Как создать правильный HTML с JSPX?(не XHTML) - PullRequest
Новая
       34

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

15 голосов
/ 09 января 2011

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

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

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

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

Ответы [ 2 ]

24 голосов
/ 09 января 2011

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, он вам не поможет.Возможно, сторонняя библиотека восполняет этот пробел, но я не могу ее найти.

Если вам не хочется кодировать свою собственную библиотеку тегов, альтернативный подход заключается в использовании 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.Хотя это приводит к ошибке синтаксического анализа из-за знака "<": </p> 

<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

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

0 голосов
/ 26 марта 2014

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

// <! [CDATA [</p> 

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

//]]>

...