Блог

Главная - Вопросы по программированию - Включить JS-файлы в файл xhtml, который был включен с помощью пользовательского интерфейса: включить

Включить JS-файлы в файл xhtml, который был включен с помощью пользовательского интерфейса: включить

#javascript #jsf #jsf-2

#javascript #jsf #jsf-2

Вопрос:

Я проиллюстрирую свой вопрос на примере:

outerfile.xhtml:

 <h:head>
    <h:outputScript library="js" name="jquery-1.6.2.js" />
    <h:outputScript library="js" name="outer.js" />
</h:head>

<h:body>
    <h:panelGroup id="inner_panel">
      <ui:include src="innerfile.xhtml" />
    </h:panelGroup>
</h:body>

innerfile.xhtml:

 <ui:composition ... >
    <h:head>
        <h:outputScript library="js" name="jquery-1.6.2.js" />
        <h:outputScript library="js" name="inner.js" />
    </h:head>

    <h:body>
        <h:panelGroup>
          I Am Text in The Inner File!
        </h:panelGroup>
    </h:body>
</ui:composition>

Мои вопросы:

  1. Можно ли объявлять js файлы во внутреннем файле так, как я это сделал?
  2. Нужно ли (и нужно ли) снова объявлять common ( jquery-1.6.2.js ) во внутреннем файле?
  3. Что произойдет, если я отменю рендеринг и повторный рендеринг inner_panel с использованием AJAX? Будут ли перезагружены заголовки, включенные во внутренние файлы?

Ответ №1:

Можно ли объявлять файлы js во внутреннем файле так, как я это сделал?

Нет. Вы также не должны указывать <h:head> include . Это приведет только к недопустимому HTML. То, что у вас есть прямо сейчас, приведет к:

 <html>
  <head>
    <script></script>
  </head>
  <body>
    <head>
      <script></script>
    </head>
    <body>
    </body>
  </body>
</html>

(щелкните правой кнопкой мыши страницу в браузере и просмотрите исходный код, чтобы увидеть его самостоятельно, w3-при необходимости проверьте)

Исправьте это соответствующим образом в innerfile.xhtml :

 <ui:composition ... >
    <h:outputScript library="js" name="jquery-1.6.2.js" target="head" />
    <h:outputScript library="js" name="inner.js" target="head" />

    <h:panelGroup>
        I Am Text in The Inner File!
    </h:panelGroup>
</ui:composition>

Это приведет к правильному HTML. Сценарии, объявленные с помощью <h:outputScript target="head"> , просто <head> автоматически попадают в, если они еще не были объявлены ранее. Как и в реальном HTML, во всем представлении должен быть только один <h:head> и <h:body> , включая любые шаблоны и включаемые файлы.

Нужно ли (и должен ли я) объявлять общий (jquery-1.6.2.js ) снова во внутреннем файле?

Нет, если в родительском файле он уже объявлен как <h:outputScript> . Но повторное объявление его во включаемом не повредит. Он все равно не будет дублироваться, если он уже был объявлен ранее.

Что произойдет, если я отменю рендеринг и повторный рендеринг inner_panel с использованием Ajax? Будут ли перезагружены заголовки, включенные во внутренние файлы?

Это работает, только если вы не используете target="head" . Будут ли они перезагружены с сервера, зависит от того, был ли он уже запрошен браузером ранее и уже присутствует и действителен в кэше браузера. Но в принципе, браузеру снова будет предложено загрузить его, да. С помощью Firebug вы можете легко определить это.

Комментарии:

1. Согласно вашему ответу, если я загружу страницу, когда внутренняя страница не отображается, а затем отобразит внутреннюю страницу, внутренние js-файлы будут отсутствовать. Правильно?

2. Я этого не говорил. Они будут включены. Браузеру будет предложено загрузить их. Но независимо от того, был ли он получен из кэша браузера или непосредственно с сервера, зависит от заголовков ответа JS и от того, находится ли он уже в кэше браузера или нет. Если он кэшируется и присутствует в кэше браузера, он не будет перезагружен (потому что он уже есть в браузере). В противном случае он действительно будет перезагружен с сервера.

Ответ №2:

Правильный способ его записи — использовать target=»head» внутри вашего объявления h:outputScript в innerfile.xhtml:

 <ui:composition ... >
    <h:outputScript library="js" target="head" name="jquery-1.6.2.js" />
    <h:outputScript library="js" target="head" name="inner.js" />
    <h:panelGroup>
       I Am Text in The Inner File!
    </h:panelGroup>
</ui:composition>

Таким образом, все ваши объявления ресурсов будут помещены во внешний . Несколько объявлений одного и того же ресурса с одним и тем же именем библиотеки / ресурса не будут отображать одно и то же объявление несколько раз, потому что средство визуализации для h: outputScript имеет некоторый код, который обнаруживает это и игнорирует повторяющиеся записи. Обратите внимание, что все будет по-другому, если вы отобразите h:outputScript, который не ссылается на файл javascript.