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

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

<body onload="foo()">

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

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

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

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

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

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

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

Объяснение:

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

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

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

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

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

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

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

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

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

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

window.onload = yourfunction;

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

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

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

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

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

вот трюк (работает везде):

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

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