页面加载后如何执行 JavaScript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8996316/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to execute JavaScript after page load?
提问by steffan
I would like to execute a JavaScript function after the page was loaded. At the moment I have a commandButton and everything works fine. However it would be more comfortable if the user is not supposed to hit the button.
我想在页面加载后执行 JavaScript 函数。目前我有一个 commandButton，一切正常。然而，如果用户不应该点击按钮，它会更舒服。
I have tried f:event, but I do not have a listener, I have only the JavaScript function. Moreover body onload does not work for me as I use only high level components.
我试过 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>
The JavaScript function PathFinder.findAndGo is defined in my master.xhtml
JavaScript 函数 PathFinder.findAndGo 在我的 master.xhtml 中定义
回答by Bhesh Gurung
Use JQuery as follows:
使用 JQuery 如下：
<script>
jQuery(document).ready(function() {
PathFinder.findAndGo();
});
</script>
Update:
更新：
It has to be within <ui:define name="content">.
它必须在<ui:define name="content">.
回答by OndroMih
There are 2 ways that work for me, when I want to execute a JS function after page load in Primefaces:
当我想在 Primefaces 页面加载后执行 JS 函数时，有两种方法对我有用：
- either use jQuery (as it is already used by Primefaces), best solution is to nest document.ready twice, so that my JS code is executed after all Primefaces code:
jQuery(document).ready(function () { jQuery(document).ready(function () { // twice in document.ready to execute after Primefaces callbacks PathFinder.findAndGo(); }); });
- or use p:remoteCommand with autorun, and place oncomplete JS callback on it
- this way form is submitted by AJAX to server but no listener executed on server side, a JS callback is executed afterwards
<p:remoteCommand oncomplete=" PathFinder.findAndGo(); " autoRun="true"/>
- 要么使用 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 with autorun，并在其上放置 oncomplete JS 回调
- 这种方式表单由 AJAX 提交到服务器但没有在服务器端执行侦听器，之后执行 JS 回调
<p:remoteCommand oncomplete=" PathFinder.findAndGo(); " autoRun="true"/>
回答by kinakuta
window.onload = function () {
// code to execute here
}
回答by Mau
For primefaces I have managed to successfully use the following:
对于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());
我已经使用以下方法加载
<head>了包含我需要 onLoad 的函数的 JS 文件：< h:outputScript library="javascript" name="nameOfMyFile.js" target="head">为了从“nameOfMyFile.js”运行我需要的 JS 函数，我使用了以下内容：
< h:body onload="nameOfMyFunction()" >请注意，我的 js 文件底部还包含以下命令：
$(document).ready(nameOfMyFunction());
The 3'rd point is for running the function onReady. This was all an experiment to see if I can add HTML to the schedule events ... as the strings passed there are parsed and html tags escaped. I have yet to figure out why I need both onReadyand onLoad.... but at the moment it's the only way it worked for me. I will update if I find anything new.
It was successful.
第三点是运行函数onReady。这完全是一个实验，看看我是否可以将 HTML 添加到计划事件中……因为传递到那里的字符串被解析并且 html 标签被转义。我还没有弄清楚为什么我需要两者onReady和onLoad......但目前这是它对我有用的唯一方法。如果我发现任何新内容，我会更新。它成功了。
回答by imalfabon
Using OndrejMsecond option of a remoteCommandbut inside an outputPanelconfigured to load after the page load by adding deferred="true"and deferredMode="load":
使用OndrejM一个的第二个选项remoteCommand但内部outputPanel通过添加被配置为网页加载后负荷deferred="true"和deferredMode="load"：
<p:outputPanel deferred="true" deferredMode="load" rendered="#{...}">
<p:remoteCommand oncomplete="PathFinder.findAndGo();" autoRun="true" />
</p:outputPanel>
回答by daniel
Include (at the bottom of your page) jQuerylibrary within your <ui:define name="content">and then use $(document).readyas usual:
在您的页面底部包含（在页面底部）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>