it-swarm.com.ru

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

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

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

function codeAddress() {
  // code
}
<body onLoad="codeAddress()">

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

window.onload = codeAddress;

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

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

192
Claes Gustavsson

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>

310
Darin Dimitrov

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

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

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

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

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

$(document).ready ( function(){
   alert('ok');
});​
36
Eat at Joes

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

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

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

14
Habeeb

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

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

7
Will

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

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

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

function codeAddress() {

}

domReady(codeAddress);
3
Russ Cam

Попробуйте 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
Kamil Kiełczewski

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>

0
Rudra