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

244

Традиційно, щоб викликати функцію JavaScript після завантаження сторінки, ви додасте onloadатрибут до тіла, що містить трохи JavaScript (зазвичай лише виклик функції)

<body onload="foo()">

Коли сторінка завантажиться, я хочу запустити якийсь код JavaScript, щоб динамічно заповнити частини сторінки даними з сервера. Я не можу використовувати onloadатрибут, оскільки використовую фрагменти JSP, у яких немає bodyелемента, до якого я можу додати атрибут.

Чи є інший спосіб викликати функцію JavaScript під час завантаження? Я б краще не використовував jQuery, оскільки я не дуже його знайомий.

javascript onload

— palAlaa
джерело

15

btw: це Javascript; Java - мова, а Javascript - інша. Немає такого поняття, як сценарій Java. FYI

— Янік Рошон

Чи можете ви переконатися, що редакція Кевіна на ваше запитання все ще задає те саме питання, або перефразовуєте його, щоб переконатися, що ми розуміємо? (Ви намагаєтесь знайти альтернативу onload?)

— STW

388

Якщо ви хочете, щоб метод завантаження приймав параметри, ви можете зробити щось подібне до цього:

window.onload = function() {
  yourFunction(param1, param2);
};

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

— Метт Сікер
джерело

І тепер, коли я динамічно включаю створену на сервері сторінку і мені потрібна DOM-готовність, мені потрібно працювати над цим мінним полем. Якби тільки хтось заздалегідь спонукав би користувачів бібліотеки

— Стефан Кендалл

4

Я не сказав, що це була гарна ідея. Хоча у головного розробника, де я працюю, є важкий випадок синдрому Not Invented Here, і я не зміг переконати його використовувати jquery за межами кількох сторінок.

— Метт Сікер

2

Тоді, можливо, вам слід змінити роботу. Якщо правильний інструмент для роботи - це не той інструмент, який ви використовуєте, навіщо бити головою об стіну, постійно бореться з некомпетентним?

— Стефан Кендалл

І чи можу я зателефонувати в ту саму свою функцію вдруге за допомогою події onclick on button?

— Faizan

73

Ще один спосіб зробити це за допомогою слухачів подій, ось як ви їх використовуєте:

document.addEventListener("DOMContentLoaded", function() {
  you_function(...);
});

Пояснення:

DOMContentLoaded Це означає, що коли об'єкти DOM документа повністю завантажуються та переглядаються JavaScript, також це могло бути "натискання", "фокусування" ...

function () Анонімна функція, буде викликана, коли подія відбудеться.

— Ахмед Джолані
джерело

5

Зауважте, що це не буде працювати в IE 8 і нижче. Інакше це найкраще чисте рішення JS!

— Філіпп

46

Ваше первісне питання було незрозумілим, якщо припустити, що редагування / тлумачення Кевіна є правильним, тоді ця перша опція не застосовується

Типові варіанти використання onloadподії:

<body onload="javascript:SomeFunction()">
....

Ви також можете розмістити свій JavaScript на самому кінці тіла; він не почне виконуватись, поки документ не буде завершено.

<body>
  ...
  <script type="text/javascript">
    SomeFunction();
  </script>
</body>

І ще один варіант - розглянути можливість використання рамки JS, яка по суті робить це:

// jQuery
$(document).ready( function () {
  SomeFunction();
});

— STW
джерело

The javascript:in the onloadнепотрібний, хоч і не шкідливий.

— icktoofay

@STW <script type="text/javascript">LoadResult();</script>даєUncaught ReferenceError: LoadResult is not defined

— Гунасегар

37

function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

Або з jQuery, якщо хочете:

$(function(){
   yourfunction();
});

Якщо ви хочете зателефонувати на кілька функцій під час завантаження сторінки, перегляньте цю статтю для отримання додаткової інформації:

Використання декількох функцій завантаження JavaScript

— Сарфраз
джерело

3

Це невірно, функція буде виконувати та призначати все, що повертається для завантаження. () Не повинно бути там.

— epascarello

1

Якщо є інші функції, які прослуховують подію завантаження, це може їх знеструмити. Краще додати слухача подій, а не призначити безпосередньо обробника подій. Навіть у цьому випадку ви б призначили його як `window.onload = ваша функція 'без закриття функції, а не так, як у вас є. Ваш спосіб прагне виконати свою функцію () під час виконання завдання.

— Робусто

що призначить повернене значення функції window.onload, яке не буде працювати, якщо тільки значення повернення не є функцією.

— I.devries

@epascarello: Хороший улов, виправлений, ви бачите звичку писати імена функцій. Спасибі

— Сарфраз

1

window.onload = вашафункція; Проблема з цим способом полягає в тому, що він не приймає параметр fucntion !!

— palAlaa

8

<!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>

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

— анонімний
джерело

3

Я думаю, що його відповідь зрозуміла, оскільки ви бачите, що сценарій поміщено в тег заголовка, що дозволяє виконувати його перед вмістом тіла .. або скажімо, передзавантажити його функції чи що завгодно .. інколи людина задає питання, тому що він не ' я взагалі не знаю, але ніколи не буває, коли хтось би ложкою годував тебе, ні хтось із цієї громади не мав би, ти повинен трохи більше шукати речі. # особливо_that_you're_a_web_developer

— M03

8

Ви повинні викликати функцію, яку ви хочете викликати під час завантаження (тобто завантаження документа / сторінки). Наприклад, функція, яку ви хочете завантажити при завантаженні документа або сторінки, називається "yourFunction". Це можна зробити, зателефонувавши на функцію події завантаження документа. Будь ласка, дивіться код нижче для більш детальної інформації.

Спробуйте вказати код нижче:

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        yourFunction();
    });
    function yourFunction(){
      //some code
    }
</script>

— Amir Md Amiruzzaman
джерело

6

ось фокус (працює скрізь):

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

— Абхішек
джерело

1

Для виявлення завантаженого html (з сервера), вставленого у DOM, використання MutationObserverабо виявлення моменту у вашій функції loadContent, коли дані готові до використання

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

let ignoreFirstChange = 0;
let observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirstChange++ > 0) console.log('Element added on', new Date());
}
)).observe(content, {childList: true, subtree:true });


// TEST: simulate element loading
let tmp=1;
function loadContent(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadContent('Senna');
loadContent('Anna');
loadContent('John');

<div id="content"><div>

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

— Каміль Кийчевський
джерело