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

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

<body onload="foo()">

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

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

Комментарии к вопросу (2)
Решение

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

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

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

Комментарии (4)

Другой способ сделать это с помощью прослушивателей событий, вот как вы их используете:

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

Объяснение:

DOMContentLoaded это означает, что, когда объектов DOM документа полностью загружены и видел на JavaScript, также это может быть "и нажмите", то "Фокус" и...

функция() анонимная функция будет вызываться при возникновении события.

Комментарии (1)

Ваш первоначальный вопрос был неясен, если предположить, что Кевин правильно отредактировал/интерпретировал, то первый вариант не применим.

Типичным вариантом является использование события onload:


....

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


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

И еще один вариант - рассмотреть возможность использования JS-фреймворка, который по своей сути делает это:

// jQuery
$(document).ready( function () {
  SomeFunction();
});
Комментарии (3)
function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

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

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

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

Комментарии (5)

Вы должны вызвать функцию вы хотите называться на нагрузке (т. е., загрузки документа/страницы). Например, функция, которую вы хотите загрузить, когда документ или загрузить страницу, что называется "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>
Комментарии (0)

здесь'ы хитрость (работает везде):

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
Комментарии (0)

в




        Test
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>




в

Комментарии (2)

Для выявления загруженные 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>

в

Комментарии (0)