页面加载后如何执行 JavaScript？答案

【问题标题】：How to execute JavaScript after page load?页面加载后如何执行 JavaScript？
【发布时间】：2012-02-18 06:13:39
【问题描述】：

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

我试过 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>

我的master.xhtml中定义了JavaScript函数PathFinder.findAndGo

【问题讨论】：

您更愿意在准备好的情况下而不是在加载状态下进行操作吗？
如果你的脚本在头部并且按钮在页面中，那么脚本总是会在元素出现之前被加载。但是，如果脚本要求页面中包含某些元素，并且用户可以在加载之前单击按钮，则您可能会考虑禁用按钮（或采取其他操作），直到它们可用为止。
将 remoteCommand 与 autorun true 一起使用。

标签： javascript jsf-2 primefaces onload

【解决方案1】：

使用JQuery如下：

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

更新：

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

【讨论】：

jQuery 仅用于处理 onload 事件不是一个好主意。
在这种情况下很好，因为他使用的 PrimeFaces 需要并加载 jQuery 本身。
我也把它放在了某个地方......在我的页面上，但没有执行任何操作。

【解决方案2】：

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

【讨论】：

对我不起作用。我把它放在脚本标签里，放在一边的不同地方，但什么也没发生。

【解决方案3】：

对于primefaces，我已经成功地使用了以下方法：

我已经在 <head> 中加载了包含我需要的函数的 JS 文件 onLoad 使用：
```
< h:outputScript library="javascript" name="nameOfMyFile.js" target="head">
```
为了从“nameOfMyFile.js”运行我需要的 JS 函数，我使用了以下内容：
```
< h:body onload="nameOfMyFunction()" >
```
请注意，我的 js 文件底部还包含以下命令：
```
$(document).ready(nameOfMyFunction());
```

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

【讨论】：

【解决方案4】：

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

要么使用 jQuery（因为它已经被 Primefaces 使用），最好的解决方案是嵌套 document.ready 两次，以便在所有 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"/>

【讨论】：

还有一个选项可以指示 Primefaces 从控制器中的 Java 代码执行 JS，但我不确定这是否在页面加载后执行。我在 AJAX 操作中使用过此选项一次，当时我无法指示 Primefaces 在 AJAX 之后更新页面标题：org.primefaces.context.RequestContext.getCurrentInstance().execute("document.title='" + StringEscapeUtils.escapeEcmaScript(pageTitle) + "'");

【解决方案5】：

在您的<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>

【讨论】：

【解决方案6】：

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

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

【讨论】：