Question

我想在页面加载后执行JavaScript函数。目前我有一个commandButton，一切正常。但是如果用户不应该按下按钮会更舒服。

我尝试了f：event，但我没有监听器，我只有JavaScript函数。此外，body onload对我不起作用，因为我只使用高级组件。

<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中定义

Answer 1

使用JQuery如下：

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

更新

必须在<ui:define name="content">之内。

Answer 2

当我想在Primefaces页面加载后执行JS函数时，有两种方法对我有用：

使用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和autorun，并在其上放置完整的JS回调
- 这种形式由AJAX提交给服务器，但没有在服务器端执行监听器，之后执行JS回调
- <p:remoteCommand oncomplete=" PathFinder.findAndGo(); " autoRun="true"/>

Answer 3

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

Answer 4

对于primefaces，我成功地使用了以下内容：

我已经在<head>中加载了包含我需要onLoad的函数的JS文件：

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

为了从“nameOfMyFile.js”运行我需要的JS函数，我使用了以下代码：
```
< h:body onload="nameOfMyFunction()" >
```
请注意我的js文件底部还包含以下命令：
```
$(document).ready(nameOfMyFunction());
```

第3点用于运行函数onReady。这是一个实验，看看我是否可以将HTML添加到计划事件...因为在那里传递的字符串被解析并且html标签被转义。我还没弄清楚为什么我需要onReady和onLoad ......但是目前这是它对我有用的唯一方式。如果我发现任何新内容，我会更新。它很成功。

Answer 5

使用 remoteCommand 的 OndrejM 第二个选项，但在 outputPanel 内部，配置为在页面加载后通过添加deferred="true"和deferredMode="load"：

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

Answer 6

在<ui:define name="content">中加入（位于页面底部） jQuery 库，然后照常使用$(document).ready：

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

页面加载后如何执行JavaScript？

6 个答案: