在页面加载后执行Javascript

Executing Javascript after page has loaded

本文关键字:执行 Javascript 加载      更新时间:2023-09-26

我是JavaScript新手,在确定事件何时触发时遇到了一个小问题。情况是这样的。我正在写一个ASP。网络应用程序。在我的代码后面,在Page_Load()中,我有一些代码。我需要先执行这段代码。在这段代码完成执行之后,我需要执行我的JavaScript。

是否存在一个事件或其他东西,以确保代码将按该顺序执行?

最简单的方法是将函数调用添加到body的onload事件

<body onload="yourFunction()">
function yourFunction() {
}
或者,您也可以在正文的末尾放置一些脚本。这里的任何脚本都将在主体被处理后执行。你可以使用
var divElement = document.getElementById("divId");

不返回null

编辑

我没有在你的问题上看到jQuery标记,但是,如果你碰巧正在使用它,你也可以这样做:

$(document).ready(function() {
    //dom is ready
});

或更简单:

$(function() {
    //dom is ready
});

包含在正文中的脚本在正文加载完成后执行,并按顺序执行。这可以用作跨浏览器解决方案,以确保在页面加载后加载脚本。

<!DOCTYPE html>
<html>
<head>
    <!-- scripts loaded in unknown order in some browsers -->
    <script type="text/javascript" src="headscript.js"></script>
</head>
<body>
    <!-- scripts included on body execute in order when the DOM is ready -->
    <script type="text/javascript">
        (function () {
            // do what you want here without trashing global scope
            // you should probably include this as an external script
        }());
    </script>
</body>   
</html>

是的,有几种方法:

$(window).ready(function() 
{
   //Your code goes here
});

b。

$(document).ready(function() 
{
   //Your code goes here
});

c。

window.onload = function() 
 {
  //Your code goes here
 }

我想你可能对ASP页面的生命周期有点困惑。

每次构建页面时,服务器端(VB/c#)代码中的所有事件都将触发(可能除了用户触发的事件)。Init Load preender Render Unload等等。只有在页面构建完成之后,它才会通过网络发送到浏览器。一旦浏览器控制了,那么你的JavaScript可能会被执行。

Adam建议的方法是一种可能的方法。

不用担心,服务器端脚本总是在客户端脚本之前执行。

要确保Javascript在页面上的所有内容(DOMContent-wise)创建之后执行,您有几个选项。您可以将脚本添加到标记的最底部。这实际上是一种很好的做法,因为在页面底部放置脚本可以使页面加载得更快,并且感知性能很重要。

正如Adam所说,您还可以使用事件处理程序,例如window。Onload = function(){}或窗口。addEventListener("load", function(){}, true)。另一种选择是使用"DOMContentLoaded"而不是"load",它将在html文件的整个文本部分加载后执行(而不是等待所有图像等加载)。然而,如果你把脚本放在页面底部,这将是不必要的。

下面是一个示例html文件。注意,样式表在顶部定义,而脚本在底部定义。

<!DOCTYPE html>
<html>
<head>
<title></title>
<link type="text/css" href="style.css" rel="stylesheet"/>
</head>
<body>
<script type="text/Javascript" src="script.js"></script>
</body>
</html>