如何在页面加载后执行JavaScript？

Question

如何在页面加载后执行JavaScript？

20

我想在页面加载后执行一个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文件中定义。

- steffan

你更愿意在 ready 上完成它，而不是 onload 吗？ - Benny Tjia

如果你的脚本在头部而按钮在页面中，那么脚本将始终在元素出现之前加载。然而，如果脚本需要某些元素在页面中，并且用户可以在它们加载之前单击按钮，你可能需要考虑禁用该按钮（或采取其他措施），直到它们可用。 - RobG

使用 remoteCommand 并将 autorun 设置为 true。 - meyquel

6个回答

9

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

使用jQuery（因为它已经被Primefaces使用），最好的解决方案是嵌套document.ready两次，以便在所有Primefaces代码之后执行我的JS代码：
- jQuery(document).ready(function () { jQuery(document).ready(function () { // 两次在document.ready中执行以在Primefaces回调之后执行 PathFinder.findAndGo(); }); });
或者使用带有autorun的p:remoteCommand，并在其上放置oncomplete JS回调
- 这样，表单通过AJAX提交到服务器，但不会在服务器端执行监听器，之后执行JS回调
- <p:remoteCommand oncomplete=" PathFinder.findAndGo(); " autoRun="true"/>

- OndroMih

2

还有一种选项可以指示Primefaces从控制器中的Java代码执行JS，但我不确定这是否在页面加载后执行。我曾经在AJAX操作中使用过这个选项，当我无法指示Primefaces在AJAX之后更新页面标题时：

org.primefaces.context.RequestContext.getCurrentInstance().execute("document.title='" + StringEscapeUtils.escapeEcmaScript(pageTitle) + "'");

- OndroMih

5

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

- kinakuta

对我不起作用。我将它放在脚本标签中，并将其放置在侧边栏的不同位置，但什么也没有发生。 - steffan

3

使用 OndrejM 的第二个选项，即在一个配置为在页面加载后添加 deferred="true" 和 deferredMode="load" 的 outputPanel 中使用 remoteCommand：

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

- imalfabon

3

对于PrimeFaces，我已经成功地使用了以下内容：

I have loaded in <head> the JS file containing the functions I needed onLoad by using:
```
< h:outputScript library="javascript" name="nameOfMyFile.js" target="head">
```
I have used the following in order to run the JS functions I needed from "nameOfMyFile.js":
```
< h:body onload="nameOfMyFunction()" >
```
Please note that my js file also contained the following command at the bottom:
```
$(document).ready(nameOfMyFunction());
```

第三点是运行函数onReady。这是一个实验，看是否可以在日程安排事件中添加HTML...因为传递的字符串会被解析并转义HTML标签。我还没有弄清楚为什么需要同时使用onReady和onLoad...但目前这是唯一能让它正常工作的方式。如果我发现了任何新信息，我会进行更新的。它已经成功了。

- Mau

0

在页面底部的<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>

- daniel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bhesh Gurung · Accepted Answer

使用 JQuery 的方法如下：

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

更新：

必须在 <ui:define name="content"> 中进行。