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

246

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

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

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

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

window.onload = codeAddress;

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

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

javascript html onload

— Клас Густавссон
источник

Вы бежите window.onload = codeAddressпосле того, codeAddress()как определено? Если так, это должно работать. Вы уверены, что нет ошибки в другом месте?

— Скиллдрик

Это не имеет никакого смысла. window.onload запускается после загрузки страницы, и весь javascript доступен, поэтому функция codeAddress () может быть объявлена в любом месте страницы или связанных js-файлов. Это не должно происходить раньше, если оно не было вызвано во время самой загрузки страницы.

— Джаред Фарриш

@ Джаред Да, это так. Посмотрите на jsfiddle.net/HZHmc . Это не работает Но если вы переместите window.onload после определения: jsfiddle.net/HZHmc/1, это сработает.

— Скиллдрик

Объявление функции обычно поднимается в верхнюю часть области, поэтому функция может быть объявлена в любом месте доступной области.

— Расс Кэм

4

Все популярные браузеры могут отображать ошибки JavaScript - вы получаете какие-либо?

— Кристоф

354

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>

Развернуть фрагмент

— Дарин димитров
источник

3

Как я уже сказал в своем ответе, с видимым кодом нет ничего плохого - причина, по которой он не работает, должна быть где-то в JS.

— Скиллдрик

если вы поместите абзац с текстом в тело, он не будет загружаться, пока вы не нажмете ОК.

— FluorescentGreen5

Этот глобальный обработчик событий доступен только в Chrome. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…

— Devappended

177

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

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

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

— Спенсер Мэй
источник

4

(нубский вопрос: что делает false?)

— ᔕᖺᘎᕊ

7

@ ᔕᖺᘎᕊ для свойства «пузыри» (которое вам не нужно включать, я просто заполняю все логические значения для хорошей привычки). Существует также еще одно логическое выражение для свойства «cancellable», но оно не очень полезно, поскольку вышеприведенное выражение уже не подлежит отмене. Подробнее об этом читайте здесь: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— Спенсер,

1

Это то, что я искал прямо сейчас :) Выполняется, когда DOM завершен, так что вы можете манипулировать им, а не когда браузер говорит «страница полностью загружена», что может занять несколько секунд, основываясь на внешних материалах (таких как реклама)

— Натаниэль

1

@ x-yuri "Событие DOMContentLoaded наступает, когда документ полностью загружен и проанализирован, не дожидаясь окончания загрузки таблиц стилей, изображений и подкадров (событие load может использоваться для обнаружения полностью загруженной страницы)." - stackoverflow.com/questions/2414750/…

— Спенсер

1

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

— Yay295

46

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

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

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

— Ешь в Джо
источник

4

Ваш ответ научил меня много, но не о jQuery / javascript.

— unicorn2

2

@VijayKumar это jQuery, а не нативный Javascript, поэтому для его работы должна быть включена библиотека jQuery

— Спенсер,

30

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

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

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

— Хабиб
источник

1

Это единственный код, который работает с предварительным просмотром HTML для GitHub: htmlpreview.github.io Другой код, хотя и правильный, разрушен этим предварительным просмотром HTML.

— Джейсон Дусетт

2

Может кто-нибудь объяснить, чем это отличается от размещения тегов скрипта в конце HTML-страницы и назначения анонимной функции?

— Pat-Laugh

10

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

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

— Будет
источник

спасибо за предоставление дополнительной информации об onloadиспользовании

— CybeX

4

Попробуй readystatechange

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

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

loading - документ загружается (во фрагменте не запускается)
интерактивный - документ разбирается, запускается раньшеDOMContentLoaded
завершено - документ и ресурсы загружены, запущены доwindow.onload

Показать фрагмент кода

<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += `DOMContentLoaded (timestamp: ${Date.now()})</br>`;
  });
  
  window.onload = () => {
    mydiv.innerHTML += `window.onload (timestamp: ${Date.now()}) </br>` ;
  } ;

  document.addEventListener('readystatechange', () => {
    mydiv.innerHTML += `ReadyState: ${document.readyState}  (timestamp: ${Date.now()})</br>`;
    
    if (document.readyState == 'complete') codeAddress();
  });

  function codeAddress() {
    mydiv.style.color = 'red';
  }
</script>

<div id='mydiv'></div>

Развернуть фрагмент

— Камил Келчевски
источник

3

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

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

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

function codeAddress() {

}

domReady(codeAddress);

— Русь Кэм
источник

0

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>

Развернуть фрагмент

— Рудра
источник