Как вызвать функцию 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>

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

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

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

Ответы: