Fatal编程技术网
  • javascript/
  • 如何在页面加载时调用JavaScript函数？

如何在页面加载时调用JavaScript函数？

javascript

如何在页面加载时调用JavaScript函数？,javascript,onload,Javascript,Onload,传统上，要在页面加载后调用JavaScript函数，需要在包含一点JavaScript的主体中添加一个onload属性（通常只调用函数） 加载页面后，我想运行一些JavaScript代码，用服务器的数据动态填充页面的各个部分。我不能使用onload属性，因为我使用的是JSP片段，它没有body元素可以添加属性 有没有其他方法可以在加载时调用JavaScript函数？我不想使用jQuery，因为我对它不太熟悉 function yourfunction() { /* do stuff on p

传统上，要在页面加载后调用JavaScript函数，需要在包含一点JavaScript的主体中添加一个
onload
属性（通常只调用函数）
加载页面后，我想运行一些JavaScript代码，用服务器的数据动态填充页面的各个部分。我不能使用
onload
属性，因为我使用的是JSP片段，它没有
body
元素可以添加属性

有没有其他方法可以在加载时调用JavaScript函数？我不想使用jQuery，因为我对它不太熟悉

function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;
如果需要，也可以使用jQuery：

$(function(){
   yourfunction();
});
如果要在页面加载时调用多个函数，请参阅本文以了解更多信息：

您原来的问题不清楚，假设凯文的编辑/解释是正确的，那么第一个选项不适用

典型的选项是使用
onload
事件：

<body onload="javascript:SomeFunction()">
....
如果希望onload方法获取参数，可以执行以下类似操作：

window.onload = function() {
  yourFunction(param1, param2);
};
这会将onload绑定到一个匿名函数，当调用该函数时，它将使用您给定的任何参数运行所需的函数。当然，您可以从匿名函数内部运行多个函数。

另一种方法是使用事件侦听器，下面介绍如何使用它们：

document.addEventListener("DOMContentLoaded", function() {
  you_function(...);
});
说明：

DOMContentLoaded这意味着当文档的DOM对象完全加载并被JavaScript看到时，也可能是“单击”、“聚焦”

function（）事件发生时将调用匿名函数。

您必须在加载时调用希望调用的函数（即加载文档/页面）。 例如，在加载文档或页面时要加载的函数称为“yourFunction”。这可以通过调用文档的加载事件函数来实现。有关更多详细信息，请参见下面的代码

请尝试以下代码：

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        yourFunction();
    });
    function yourFunction(){
      //some code
    }
</script>


$（文档）.ready（函数（）{
yourFunction（）；
});
函数yourFunction（）{
//一些代码
}
以下是诀窍（适用于所有地方）：


测验
函数代码地址（）{
警报（“正常”）；
}
window.onload=代码地址；
要检测插入DOM的已加载html（来自服务器），请使用
MutationObserver
或在数据准备好使用时检测loadContent函数中的时刻

让ignoreFirstChange=0；
让观察者=（新的变异观察者（（m，ob）=>
{
if（ignoreFirstChange++>0）console.log（'Element added on'，new Date（））；
}
)).observe（内容，{childList:true，subtree:true}）；
//测试：模拟单元荷载
设tmp=1；
函数loadContent（名称）{
设置超时（（）=>{
log（`Element${name}loaded`）
content.innerHTML+=`我的名字是${name}`；
}，1500*tmp++）
}; 
装载量（“塞纳”）；
装载内容（“安娜”）；
装载内容（“约翰”）

顺便说一句：它是Javascript；Java是一种语言，Javascript是另一种语言。没有Java脚本这样的东西。请确认Kevin对您问题的编辑是否仍在问同一个问题，或者重新措辞以确保我们理解？（您是否正在尝试寻找onload的替代方案？）这是否回答了您的问题？这是不正确的，函数将执行并分配它返回到onload的任何内容。（）不应该在那里。如果有其他函数正在侦听onload事件，那么这会将它们吹走。最好添加事件侦听器，而不是直接分配事件处理程序。即使在这种情况下，您也可以在没有函数闭包的情况下将其指定为“window.onload=yourfunction”，而不是按照您的方式。您的方法是在赋值时执行您的函数（）。这将把函数的返回值赋给window.onload，除非返回值是函数，否则它将不起作用。@epascarello:很好，修复了，您在编写函数名时看到了一个习惯。Thankswindow.onload=您的函数；这种方法的问题是它不接受function参数！！现在，当我动态地包含一个服务器生成的页面并且需要DOM就绪时，我需要处理这个雷区。要是有人能早点鼓励图书馆用户就好了。我没说这是个好主意。虽然我工作的首席开发人员有一个很强的非发明于此综合征的案例，我还没能说服他在几页之外使用jquery。那么也许你应该换工作了。如果工作的正确工具不是您正在使用的工具，为什么要不断地与不称职的人进行斗争？我可以使用onclick event on button第二次调用相同的yourfunction吗？如果另一个脚本已经在window.onload上加载了一个函数，此方法将覆盖它。在某些情况下，这可能是一个问题。document.addEventListener方法对我来说似乎更可取。
onload
中的
javascript:
是不必要的，尽管不是有害的。@STW
LoadResult（）给出
未捕获引用错误：未定义LoadResult
请注意，这在IE 8及更低版本中不起作用。否则这就是最好的纯JS解决方案！我认为他的答案很清楚，因为你可以看到脚本被放在head标签中，这样就可以在body内容之前执行。。或者说预加载它的函数或者其他什么。。有时一个人问问题是因为他根本不知道，但从来没有人会用勺子喂你，这个社区的任何人也不会，你必须自己多查一些东西#尤其是你是一个网络开发者。我认为这不是一场代码混淆比赛。@abhishek你能解释一下你的代码是做什么的吗？不清楚，所以没用。

window.onload = function() {
  yourFunction(param1, param2);
};



document.addEventListener("DOMContentLoaded", function() {
  you_function(...);
});



<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        yourFunction();
    });
    function yourFunction(){
      //some code
    }
</script>



r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}