Как запустить функцию при загрузке страницы? - PullRequest
Новая
       17

Как запустить функцию при загрузке страницы?

212 голосов
/ 30 января 2011

Я хочу запустить функцию при загрузке страницы, но не хочу использовать ее в теге <body>.

У меня есть скрипт, который запускается, если я инициализирую его в <body>, например: 

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

Но я хочу запустить его без <body onload="codeAddress()">, и я много чего перепробовал, например. это: 

window.onload = codeAddress;

Но это не работает.

Так как мне запустить его, когда страница загружена?

Ответы [ 9 ]

323 голосов
/ 30 января 2011

window.onload = codeAddress; должно работать - вот демка и полный код: 

<!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>
147 голосов
/ 23 сентября 2014

Вместо того, чтобы использовать jQuery или window.onload, нативный JavaScript принял некоторые замечательные функции с момента выпуска jQuery.Все современные браузеры теперь имеют свою собственную функцию DOM ready без использования библиотеки jQuery.

Я бы порекомендовал это, если вы используете нативный Javascript. 

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);
40 голосов
/ 29 ноября 2012

Принимая ответ Дарина, но стиль jQuery. (Я знаю, что пользователь попросил JavaScript).

бегущая скрипка 

$(document).ready ( function(){
   alert('ok');
});​
17 голосов
/ 18 июня 2018

Альтернативный раствор. Я предпочитаю это для краткости и простоты кода. 

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

Это анонимная функция, имя которой не указано. Здесь происходит то, что функция определяется и выполняется вместе. Добавьте это в начало или конец тела, в зависимости от того, должно ли оно выполняться перед загрузкой страницы или вскоре после загрузки всех элементов HTML.

8 голосов
/ 05 декабря 2017

window.onload = function() { ... и т. Д. Не очень хороший ответ.

Это, вероятно, сработает, но также нарушит любые другие функции, уже подключенные к этому событию.Или, если другая функция подключится к этому событию после вашего, оно сломает ваше.Итак, вы можете потратить много часов спустя, пытаясь выяснить, почему что-то, что работало, больше не работает.

Более надежный ответ здесь: 

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);}

Надеюсь, это поможет:)

3 голосов
/ 30 января 2011

Взгляните на сценарий domReady , который позволяет настроить несколько функций для выполнения при загрузке DOM.Это в основном то, что Dom Ready делает во многих популярных библиотеках JavaScript, но он легок и может быть взят и добавлен в начале вашего внешнего файла сценария.

Пример использования 

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

function codeAddress() {

}

domReady(codeAddress);
0 голосов
/ 05 мая 2019

Если вы хотите запустить функцию при загрузке тела.Вместо присвоения атрибуту onload тега body вы можете сделать это следующим образом.

// 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>
0 голосов
/ 08 апреля 2019

Попробуйте 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>
0 голосов
/ 17 января 2019

window.onload будет работать так: 

function codeAddress() {
	document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;
<!DOCTYPE html>
<html>
<head>
	<title>learning java script</title>
	<script src="custom.js"></script>
</head>
<body>
	<p id="test"></p>
	<li>abcd</li>
</body>
</html>
...