Question

我想在加载页面时运行一个函数，但我不想在<body>标记中使用它。

如果我在<body>初始化它，我会运行一个脚本，如下所示：

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

但是我想在没有<body onload="codeAddress()">的情况下运行它，我尝试了很多东西，例如这样：

window.onload = codeAddress;

但它没有用。

那么如何在加载页面时运行它？

Answer 1

window.onload = codeAddress;应该有效 - here's a demo，完整代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
    </head>
    <body>
    
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        
        </script>
    </head>
    <body onload="codeAddress();">
    
    </body>
</html>

Answer 2

自从jQuery发布以来，本机JavaScript采用了一些很棒的功能，而不是使用jQuery或window.onload。所有现代浏览器现在都有自己的DOM就绪函数，而不使用jQuery库。

如果您使用原生Javascript，我建议您这样做。

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);

Answer 3

采用Darin的答案，但jQuery风格。（我知道用户要求使用javascript）。

running fiddle

$(document).ready ( function(){
   alert('ok');
});

Answer 4

替代解决方案。为了简洁和代码简单，我更喜欢这个。

(function () {
    alert("I am here");
})();

这是一个匿名函数，其中未指定名称。这里发生的是，函数是一起定义和执行的。将其添加到正文的开头或结尾，具体取决于在加载页面之前还是在加载所有HTML元素之后不久执行它。

Answer 5

window.onload = function() { ......等不是一个好的答案。

这可能会有效，但它也会破坏已经挂钩到该事件的任何其他功能。或者，如果另一个函数在您的事件之后挂钩，那么它将会破坏您的事件。所以，你可以花费很多时间来试图弄清楚为什么那些有效的东西不再存在。

更强大的答案here:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

我一直在使用的一些代码，我忘记了我发现它给作者的信用。

function my_function() {
    // whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}

希望这会有所帮助：）

Answer 6

查看domReady script，它允许在DOM加载时设置多个函数来执行。它基本上是Dom准备在许多流行的JavaScript库中所做的，但它是轻量级的，可以在外部脚本文件的开头添加和添加。

使用示例

// add reference to domReady script or place 
// contents of script before here

function codeAddress() {

}

domReady(codeAddress);

Answer 7

window.onload将像这样工作：

$dataArray = array('234534,345345,445667');

if($arrayCheck = $mysqli->prepare("SELECT FRIEND_ID FROM FRIENDS_DIR WHERE ID=? AND ONLINE=1")){
    $arrayCheck->bind_param('s', $dataA);
    $arrayCheck->execute();
    $arrayCheck->bind_result($FidS);
    $arrayCheck->store_result();
    if($arrayCheck->num_rows > 0){
        while ($arrayCheck->fetch()) {
            if (array_diff($FidS, $dataArray)){
                $res = "NoSame";
            }
        }
    }
}
echo $res;

function codeAddress() {
	document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;

Answer 8

尝试readystatechange

document.addEventListener('readystatechange', () => {    
  if (document.readyState == 'complete') codeAddress();
});

状态为：

正在加载-文档正在加载（代码段中未触发）
交互式-解析文档，并在DOMContentLoaded之前触发
完成-加载文档和资源，并在window.onload之前触发

<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += 'DOMContentLoaded' + '</br>';
  });
  
  window.onload = () => {
    mydiv.innerHTML += 'window.onload' + '</br>';
  } ;

  document.addEventListener('readystatechange', () => {
    mydiv.innerHTML += 'ReadyState: '+document.readyState + '</br>';
    
    if (document.readyState == 'complete') codeAddress();
  });

  function codeAddress() {
    mydiv.style.color = 'red';
  }
</script>

<div id='mydiv'></div>

Answer 9

页面加载后，该函数将立即运行：

(*your function goes here*)();

或者：

document.onload = functionName();
window.onload = functionName();

Answer 10

我相信这是在不同版本的浏览器之间保持支持的最佳方式

if (window.addEventListener) {
   window.addEventListener("load", myFunction, false);
}
else if (window.attachEvent) {
   window.attachEvent("onload", myFunction);
}
else {
   window.onload = myFunction; //will override previously attached event listeners.
}

Answer 11

如果要在主体加载时运行功能。您可以这样做，而不是给body标签赋予onload属性。

// define the body
var body = document.getElementsByTagName("body")[0];
    // or
    // var body = document.querySelector("body");
    // or 
    // var body = document.querySelectorAll("body")[0];
    
    
      function codeAddress() {
      // your function
        alert("Hello World");
    }
    
    body.onload = function() {
       codeAddress();
    };

<!DOCTYPE html>
<html>
<head>
	<title>learning java script</title> 
</head>
<body>
	<h1>Sample Heading</h1>
  <p>Sample text</p>
</body>
</html>

如何在加载页面时运行函数？

11 个答案: