web-dev-qa-db-ja.com

ページの読み込み後に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で定義されています

javascriptjsf-2primefacesonload
19
steffan

次のようにJQueryを使用します。

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

更新：

<ui:define name="content">内にある必要があります。

23
Bhesh Gurung

Primefacesでページをロードした後にJS関数を実行したい場合、2つの方法があります。

  • jQueryを使用するか（Primefacesですでに使用されているため）、最善の解決策はdocument.readyを2回ネストして、すべてのPrimefacesコードの後に​​JSコードが実行されるようにすることです。
    • jQuery(document).ready(function () { jQuery(document).ready(function () { // twice in document.ready to execute after Primefaces callbacks PathFinder.findAndGo(); }); });
  • または、自動実行でp：remoteCommandを使用して、oncomplete JSコールバックを配置します
    • この方法でフォームはAJAX=によってサーバーに送信されますが、サーバー側で実行されるリスナーはありません。後でJSコールバックが実行されます
    • <p:remoteCommand oncomplete=" PathFinder.findAndGo(); " autoRun="true"/>
9
OndroMih
window.onload = function () {
  // code to execute here
}
4
kinakuta

プライムフェイスの場合、私は以下をうまく使用できました。

  1. 以下を使用して、onLoadに必要な関数を含むJSファイルを<head>にロードしました。

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

  2. 「nameOfMyFile.js」から必要なJS関数を実行するために、以下を使用しました。

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

  3. 私のjsファイルには、下部に次のコマンドも含まれていることに注意してください。

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

3番目のポイントは、関数onReadyを実行することです。これはすべて、スケジュールイベントにHTMLを追加できるかどうかを確認するための実験でした...渡された文字列が解析され、htmlタグがエスケープされるためです。なぜonReadyとonLoad....の両方が必要なのかはまだわかりませんが、現時点では、それが唯一の方法です。新しいものが見つかったら更新します。成功しました。

3
Mau

OndrejMremoteCommandの2番目のオプションを使用しますが、outputPanelの内部で、ページのロード後にdeferred="true"とdeferredMode="load"を追加してロードするように設定します。

<p:outputPanel deferred="true" deferredMode="load" rendered="#{...}"> 
     <p:remoteCommand oncomplete="PathFinder.findAndGo();" autoRun="true" />
</p:outputPanel>
2
imalfabon

（ページの下部に）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>_
0
daniel