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

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

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

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

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

window.onload = codeAddress;

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

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

Ответы

Ответ 1

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>

Ответ 2

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

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

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

Ответ 3

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

запущенная скрипка

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

Ответ 4

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

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

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

Ответ 5

window.onload = function(){codeAddress();};

Ответ 6

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

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

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

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

function codeAddress() {

}

domReady(codeAddress);

Ответ 8

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>

Ответ 9

Попробуй readystatechange

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

где состояния:

  • loading - документ загружается (во фрагменте не запускается)
  • интерактивный - документ анализируется, запускается до 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>

Ответ 10

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

// define the body
var body = document.getElementsByTagName("body")[0];
    // or
    // var body = document.querySelector("body");
    // or 
    // var body = document.getElementsByTagName("body");
    
    
      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>