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

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

<body onload="foo()">

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

Пояснение:

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

Функция

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

Ответ 3

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

window.onload = yourfunction;

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

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

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

Ответ 4

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

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

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

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

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

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

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

Ответ 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>

Ответ 6

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

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

Ответ 7

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

Ответ 8

Для обнаружения загруженного HTML (с сервера), вставленного в DOM, используйте MutationObserver или определите момент в функции loadContent, когда данные готовы к использованию.

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


// simulate element loading
var 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>