页面加载后如何执行JavaScript？

Question

我想在页面加载后执行 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>

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

Answer 1

按如下方式使用 JQuery：

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

更新：

它必须位于 内。

Answer 2

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

• 要么使用 jQuery（因为 Primefaces 已经使用它），最好的解决方案是嵌套 document.ready 两次，以便我的 JS代码在所有 Primefaces 代码之后执行：
  • jQuery(文档).ready(function () {
jQuery(文档).ready(函数() {
// 在 document.ready 中执行两次，在 Primefaces 回调后执行
路径查找器.findAndGo();
});
});
• 或使用带有自动运行功能的 p:remoteCommand，并在其上放置 oncomplete JS 回调
  • 这种方式表单通过AJAX提交到服务器，但服务器端没有执行监听器，之后执行JS回调

Answer 3

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

Answer 4

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

1. 我已在 中加载了包含我需要 onLoad 的函数的 JS 文件：

   <前><代码>< h：outputScript库=“javascript”名称=“nameOfMyFile.js”目标=“head”>

2. 我使用了以下内容来运行 JS 函数我需要来自“nameOfMyFile.js”：

   <前><代码>< h:body onload="nameOfMyFunction()" >

3. 请注意，我的 js 文件底部还包含以下命令：

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

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

Answer 5

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

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

Answer 6

在您的 中包含（在页面底部）jQuery 库，然后使用 $(document)。像往常一样准备好：

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