Как выполнить JavaScript после загрузки страницы?

Я хотел бы выполнить функцию JavaScript после загрузки страницы. На данный момент у меня есть commandButton, и все работает нормально. Однако было бы удобнее, если бы пользователь не нажал кнопку.

Я пробовал f: event, но у меня нет слушателя, у меня есть только функция JavaScript. Кроме того, нагрузка на тело не работает для меня, поскольку я использую только компоненты высокого уровня.

<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:pm="http://primefaces.org/mobile" contentType="text/html">

<ui:composition template="/resources/master.xhtml">

    <ui:define name="content">


        <pm:content>

            <h:inputHidden id="address" value="#{pathFinderBean.address}" />

            <div id="map" style="width: 100%; height: 285px;"></div>

             <p:commandButton type="button" value="Route" onclick="PathFinder.findAndGo()"/>

            <div id="route"></div>

        </pm:content>
    </ui:define>

</ui:composition>

Функция JavaScript PathFinder.findAndGo определена в моем master.xhtml

Ответы

Ответ 1

Используйте JQuery следующим образом:

<script>
    jQuery(document).ready(function() {
        PathFinder.findAndGo();
    });
</script>

Update:

Он должен находиться в пределах <ui:define name="content">.

Ответ 2

Есть два способа работы для меня, когда я хочу выполнить JS-функцию после загрузки страницы в Primefaces:

  • либо использовать jQuery (поскольку он уже используется Primefaces), лучшим решением является вложение document.ready в два раза, так что мой JS-код выполняется после кода Primefaces:
    • jQuery(document).ready(function () { jQuery(document).ready(function () { // twice in document.ready to execute after Primefaces callbacks PathFinder.findAndGo(); }); });
  • или используйте p: remoteCommand с автозапуском и поместите на него неполный ответ JS
    • форма этого способа передается AJAX на сервер, но не выполняется прослушиватель на стороне сервера, после этого выполняется обратный вызов JS
    • <p:remoteCommand oncomplete=" PathFinder.findAndGo(); " autoRun="true"/>

Ответ 3

window.onload = function () {
  // code to execute here
}

Ответ 4

Для правых поверхностей мне удалось успешно использовать следующее:

  • Я загрузил в <head> файл JS, содержащий функции, которые мне нужны для загрузки, используя:

    < h:outputScript library="javascript" name="nameOfMyFile.js" target="head">

  • Я использовал следующее для запуска функций JS, которые мне нужны из "nameOfMyFile.js":

    < h:body onload="nameOfMyFunction()" >

  • Обратите внимание, что мой js файл также содержит следующую команду внизу:

    $(document).ready(nameOfMyFunction());

3-я точка предназначена для запуска функции onReady. Это был весь эксперимент, чтобы увидеть, могу ли я добавить HTML к событиям расписания... поскольку строки, переданные там, анализируются и html-теги. Мне еще предстоит выяснить, зачем мне нужны onReady и onLoad.... но на данный момент это единственный способ, который это сработало для меня. Я обновлю, если найду что-нибудь новое. Это было успешно.

Ответ 5

Включите (внизу страницы) библиотеку jQuery в пределах <ui:define name="content">, а затем используйте $(document).ready, как обычно:

<ui:define name="content">
...
<!-- jQuery -->
<h:outputScript name="vendor/jquery/jquery.min.js"/>
<script>
  $(document).ready(function(){
      alert(1);
  });
</script>
</ui:define>