页面加载后执行Javascript

Question

I am new to JavaScript and having a slight issue figuring out when events fire. 我是JavaScript的新手，在发生事件时会发现一个小问题。 Here is the situation. 情况就是这样。 I am writing an ASP.Net application. 我正在编写一个ASP.Net应用程序。 In my code behind, in the Page_Load() I have some code. 在我的代码后面，在Page_Load（）中我有一些代码。 I need this code to execute first. 我需要先执行此代码。 After this code has finished executing, then I need my JavaScript to execute. 在此代码执行完毕后，我需要执行JavaScript。

Is there an event or something that exists that insures the code will execute in that order? 是否存在确保代码按该顺序执行的事件或事物？

Answer 1

The simplest way would be to add your function call to your body's onload event 最简单的方法是将函数调用添加到body的onload事件中

<body onload="yourFunction()">

function yourFunction() {
}

Alternatively, you could also place some script at the very end of your body. 或者，您也可以在身体的最末端放置一些脚本。 Any script in here will be executed after the body is processed. 此处的任何脚本都将在处理正文后执行。 You'll be able to do things like 你将能够做到这样的事情

var divElement = document.getElementById("divId");

without it coming back as null. 没有它作为null返回。

EDIT 编辑

I didn't see jQuery tagged on your question, but, if you happen to be using it, you can also do this: 我没有在你的问题上看到jQuery标记，但是，如果你碰巧使用它，你也可以这样做：

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

or more simply: 或更简单地说：

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

Answer 2

Scripts included on the body execute when the body has loaded and they execute in order. 正文中包含的脚本在主体加载后执行，并按顺序执行。 This can be used as a cross-browser solution for ensuring scripts get loaded after the page has loaded. 这可以用作跨浏览器解决方案，以确保在页面加载后加载脚本。

<!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>

Answer 3

I think you may have a slight confusion around the lifecycle of an ASP page. 我认为你可能会对ASP页面的生命周期产生轻微的混淆。

All the events in the server-side (VB / C#) code will fire (except maybe for user triggered events) every time the page is built. 每次构建页面时，服务器端（VB / C＃）代码中的所有事件都将触发（除了用户触发的事件之外）。 So Init, Load, PreRender, Render, Unload etc... Only after the page has been built is it sent down the wire to the browser. 所以初始化，加载，PreRender，渲染，卸载等......只有在构建页面之后才将其发送到浏览器。 Once the browser has hold of it then your JavaScript may be executed. 一旦浏览器有它保持那么你的JavaScript可能被执行。

The way Adam suggests is one possible way of doing this. 亚当建议的方式是一种可行的方法。

Answer 4

Fret not, server-side scripts will always execute before client sided ones. 不用担心，服务器端脚本将始终在客户端脚本之前执行。

To ensure that the Javascript executes after everything on the page (DOMContent-wise) has been created, you have several options. 为了确保在创建页面上的所有内容（DOMContent-wise）之后执行Javascript，您有几个选项。 You can add the script to the very bottom of the tag. 您可以将脚本添加到标记的最底部。 This is actually good practice, as a script at the bottom of the page makes the page seem to load faster, and perceived performance is important. 这实际上是一种很好的做法，因为页面底部的脚本使页面看起来加载速度更快，并且感知性能很重要。

As Adam said, you can also use event handlers, such as window.onload = function(){} or window.addEventListener("load", function(){}, true). 正如Adam所说，你也可以使用事件处理程序，例如window.onload = function（）{}或window.addEventListener（“load”，function（）{}，true）。 An alternative is to use "DOMContentLoaded" instead of "load", which will execute once the entire text portion of the html file loads (as opposed to waiting for all the images, etc. to load). 另一种方法是使用“DOMContentLoaded”而不是“load”，这将在html文件的整个文本部分加载后执行（而不是等待加载所有图像等）。 If you put the script at the bottom of the page however, this will be unnecessary. 但是，如果您将脚本放在页面底部，则不需要这样做。

Here's an example html file. 这是一个示例html文件。 Notice the stylesheet is defined at the top, while the script is defined at the bottom. 请注意，样式表在顶部定义，而脚本在底部定义。

<!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>

Answer 5

Yes, there are several ways to go: 是的，有几种方法可以：

a. 一种。

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

b. 湾

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

c. C。

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

页面加载后执行Javascript

问题描述

5 个解决方案

解决方案1
8 已采纳 2011-12-07 16:15:17

解决方案2
3 2011-12-07 16:35:05

解决方案3
1 2011-12-07 16:19:25

解决方案4
1 2011-12-07 16:20:02

解决方案5
1 2011-12-07 16:44:20

页面加载后执行Javascript

问题描述

5 个解决方案

解决方案1 8 已采纳 2011-12-07 16:15:17

解决方案2 3 2011-12-07 16:35:05

解决方案3 1 2011-12-07 16:19:25

解决方案4 1 2011-12-07 16:20:02

解决方案5 1 2011-12-07 16:44:20

解决方案1
8 已采纳 2011-12-07 16:15:17

解决方案2
3 2011-12-07 16:35:05

解决方案3
1 2011-12-07 16:19:25

解决方案4
1 2011-12-07 16:20:02

解决方案5
1 2011-12-07 16:44:20