Как вызвать функцию JavaScript при загрузке страницы? - PullRequest
Новая
       30

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

196 голосов
/ 01 октября 2010

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

<body onload="foo()">

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

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

Ответы [ 8 ]

325 голосов
/ 02 октября 2010

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

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

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

56 голосов
/ 29 апреля 2012

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

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

Объяснение:

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

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

34 голосов
/ 01 октября 2010

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

Типичные параметры - это событие onload: 

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

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

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

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

// jQuery
$(document).ready( function () {
  SomeFunction();
});
32 голосов
/ 01 октября 2010 
function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

Или с jQuery, если хотите: 

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

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

6 голосов
/ 26 февраля 2014

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

<!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>
5 голосов
/ 20 мая 2015

Вот фокус (работает везде): 

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
0 голосов
/ 08 апреля 2019

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