Як запустити функцію при завантаженні сторінки?

246

Я хочу запустити функцію під час завантаження сторінки, але я не хочу її використовувати в <body>тезі.

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

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

Але я хочу запустити його без того, <body onload="codeAddress()">і я спробував багато чого, наприклад, таке:

window.onload = codeAddress;

Але це не працює.

То як я запускаю її, коли сторінка завантажується?

javascript html onload

— Клайс Густавссон
джерело

Ви біжите window.onload = codeAddressпісля того, codeAddress()як визначено? Якщо так, це має спрацювати. Ви впевнені, що в іншому місці помилки немає?

— Skilldrick

Це не має сенсу. window.onload запускається після завантаження сторінки, і всі javascript доступні, тому функцію codeAddress () можна оголосити будь-де в межах сторінки або пов'язаних js-файлів. Він не повинен бути раніше, якщо він не був викликаний під час завантаження сторінки.

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

@Jared Так. Погляньте на jsfiddle.net/HZHmc . Це не працює. Але якщо ви перемістите window.onload до після визначення: jsfiddle.net/HZHmc/1, воно дійсно працює.

— Skilldrick

Оголошення функції, як правило, піднімається до верхньої частини області, тому функцію можна оголосити будь-де в доступній області.

— Russ Cam

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.

— Skilldrick

якщо ви помістите абзац з текстом у тіло, він не завантажиться, поки ви не натиснете кнопку ОК.

— 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

(noob питання: що робить false?)

— ᔕᖺᘎᕊ

7

@ ᔕᖺᘎᕊ для властивості "бульбашок" (яку вам не потрібно включати, я просто заповнюю всі булеви на користь). Існує також ще одне булеве твердження для властивості 'cancellable', але воно не дуже корисно, оскільки вищезазначене твердження вже не скасовується. Детальніше про це читайте тут: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— Спенсер

1

Це те, що я шукав зараз :) Виконує, коли DOM заповнений, тож ви можете ним маніпулювати, а не тоді, коли браузер каже "сторінка повністю завантажена", що може зайняти кілька секунд, виходячи із зовнішніх матеріалів (наприклад, реклами)

— Натанієль

Злегка noob питання, що робити, якщо ви не знаєте, завантажується чи ні? Редагувати: Ах: document.readyState

— Брайан Ханней

1

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

— Спенсер

46

Відповідь Даріна, але стиль jQuery. (Я знаю, що користувач просив JavaScript).

бігаюча скрипка

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

— Їжте у Джоза
джерело

4

Ваша відповідь навчила мене багато, але не про jQuery / javascript.

— єдиноріг2

2

@VijayKumar це jQuery, а не рідний Javascript, тому для його роботи вам потрібна бібліотека jQuery

— Спенсер

30

Альтернативне рішення. Я вважаю за краще це для стислості та простоти коду.

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

Це анонімна функція, де ім'я не вказано. Тут відбувається те, що функція визначається та виконується разом. Додайте це до початку чи кінця тіла, залежно від того, чи потрібно його виконати перед завантаженням сторінки або незабаром після завантаження всіх елементів HTML.

— Габіб
джерело

1

Це єдиний код, який працює з HTML Preview для GitHub: htmlpreview.github.io Інший код, хоча і правильний, зруйнований цим попереднім переглядом HTML.

— Jason Doucette

1

Чи може хтось пояснити, чим це відрізняється від розміщення тегів сценарію в кінці сторінки HTML та мети анонімної функції?

— Пат-

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

Спробуйте готовузміну

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

де штати:

завантаження - документ завантажується (не знімається у фрагменті)
інтерактивний - документ розбирається, запускається раніше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 готовий робити у багатьох популярних бібліотеках JavaScript, але він легкий і його можна брати та додавати на початку вашого зовнішнього файлу скриптів.

Приклад використання

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

function codeAddress() {

}

domReady(codeAddress);

— Russ Cam
джерело

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>

Розгорніть фрагмент

— Рудра
джерело