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

244

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

<body onload="foo()">

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

Есть ли другой способ вызвать функцию JavaScript при загрузке? Я бы предпочел не использовать jQuery, так как я не очень знаком с ним.

javascript onload

— palAlaa
источник

15

кстати: это Javascript; Java - это язык, а Javascript - другой. Нет такого понятия, как сценарий Java. К вашему сведению

— Яник Рошон

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

— STW

388

Если вы хотите, чтобы метод onload принимал параметры, вы можете сделать что-то похожее на это:

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

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

— Мэтт Зикер
источник

И теперь, когда я динамически включаю сгенерированную сервером страницу и нуждаюсь в DOM-готовности, мне нужно пройти через это минное поле. Если бы только кто-то поощрил должным образом пользователя библиотеки раньше.

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

4

Я не сказал, что это хорошая идея. Хотя ведущий разработчик, где я работаю, имеет сильный синдром «Не изобретено здесь», и я не смог убедить его использовать jquery, за исключением нескольких страниц.

— Мэтт Зикер

2

Тогда, возможно, вам следует сменить место работы. Если правильный инструмент для работы не тот инструмент, который вы используете, зачем бить головой о стену, постоянно сражаясь с некомпетентными?

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

И можно ли во второй раз вызвать ту же функцию с помощью события onclick on button?

— Файзан

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
источник

В javascript:этом нет onloadнеобходимости, хотя и не вредно.

— icktoofay

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

— Gunasegar

37

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

window.onload = yourfunction;

Или с помощью jQuery, если вы хотите:

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

Если вы хотите вызвать более одной функции при загрузке страницы, посмотрите эту статью для получения дополнительной информации:

Использование нескольких функций JavaScript Onload

— Sarfraz
источник

3

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

— epascarello

1

Если есть другие функции, которые прослушивают событие onload, это уничтожит их. Лучше добавить прослушиватель событий, чем назначать обработчик событий напрямую. Даже в этом случае вы можете назначить его как `window.onload = yourfunction 'без закрытия функции, а не так, как вы это делаете. Ваш путь стремится выполнить вашу функцию () во время назначения.

— Робусто

это присвоит возвращаемое значение функции для window.onload, которое не будет работать, если только возвращаемое значение не является функцией.

— I.devries

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

— Сарфраз

1

window.onload = ваша функция; Проблема с этим способом заключается в том, что он не принимает параметр функции !!

— ПалАлаа

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

Я думаю, что его ответ ясен, так как вы можете видеть, что скрипт помещен в тег head, что позволяет ему выполняться до содержимого тела ... или, скажем, предварительно загрузить его функции или что-то еще .. иногда человек задает вопросы, потому что он не вообще не знаю, но это никогда не тот случай, когда кто-то будет кормить вас ложкой, и никто в этом сообществе не будет, вам придется самим искать что-то еще. # Особенно_that_you

— are_a_web_developer

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>

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

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