Изменение содержимого с помощью JavaScript на нагрузке

-2

Я добавил следующий скрипт в мой HTML тела:Изменение содержимого с помощью JavaScript на нагрузке

<script type="text/javascript"> 
    function customizeNavbar() { 
     var d = document.getElementById("navwrap"); 
     d.classList.add("container"); 
     var e = document.getElementById("navhead"); 
     e.classList.add("container"); 
    } 
</script> 
<script onload="customizeNavbar();"></script>

Это не работает моя функция на нагрузке.

Щелчок по элементу <div onclick="customizeNavbar();" /> ведет себя так, как ожидалось.

Что я могу сделать, чтобы эта страница запускала мой сценарий при загрузке?

Контекст

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

Не знаете, почему это происходит. Тем не менее, чтобы кто-нибудь дал хорошее объяснение или решение, которое действительно работает.

источник

2015-02-17 Joseph Nields

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

Почему я не должен? Кажется, что он работает. Какие проблемы это вызывает? –

Это точно так же, как просто удаление обертки функций и обработчик onload, поэтому зачем использовать его? – adeneo

вы должны попробовать, что:

<script id="someId" type="text/javascript"> 
    function customizeNavbar() { 
     var d = document.getElementById("navwrap"); 
     d.classList.add("container"); 
     var e = document.getElementById("navhead"); 
     e.classList.add("container"); 
    } 
window.onload = setTimeout(customizeNavbar, 1); 
//or 
document.getElementById("someId").onload = setTimeout(customizeNavbar, 1); //and you can put it anywhere in your code i think 
</script>

SetTimeout из 1мс немного overated, но мы никогда не достаточно уверены

Edit:

событие OnLoad происходит после того, как элемент заряжается, поэтому вы должны поместить его на один и тот же элемент. источник: http://www.w3schools.com/jsref/event_onload.asp

источник

2015-02-17 16:08:12 Waxo

window.onload вызывается в конце загрузки DOM, а elt.onload вызывается в конце загрузки этого элемента. Затем в обоих случаях загружается полная DOM или необходимая DOM. – Waxo

-1

Из-за популярности jQuery я ответил, используя методы jQuery. После того как вы included jQuery на ваш HTML-страницы, все, что вам нужно сделать, это изменить свой сценарий к этому:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    function customizeNavbar() { 
     $('#navwrap').addClass('container'); 
     $('#navhead').addClass('container'); 
    } 

    customizeNavbar(); 
    }); 
</script>

Для получения дополнительной информации, посмотрите на $(document).ready() documentation. Используя приведенный выше код, вам даже не нужна часть вашего кода. На мой взгляд, это экономит время.

источник

2015-02-17 16:08:27 Tigerman55

Это полу-полу. Сначала вы пишете '$ (document) .ready()' вместо поиска не-jquery-способа, но затем вы сохранили не-jquery 'document.getElementById (« navhead »);' вместо '$ ('# navhead «)'. Мое мнение - либо all-jQuery, либо no-jQuery. – DanFromGermany

@DanFromGermany спасибо, сэр за ваше объяснение. Я ненавижу это, когда люди сбивают, а потом не объясняют почему. Я буду помнить ваш ответ. Вы абсолютно правы. – Tigerman55

@DanFromGermany обновил ответ. – Tigerman55

Используйте событие onload окна, а не элемент сценария.

function customizeNavbar() { 
... 
} 

window.onload = customizeNavbar;

onload событие сценария не обязательно скажет вам, если весь DOM готов, только если загружен этот конкретный сценарий, и так как вы использовали его на пустой сценарий, он никогда не будет загружаться.

источник

2015-02-17 16:09:41 MrCode

Это правильный способ и простой способ сделать это без дополнительных библиотек. Вы получили мой голос. –

Это не работает. –

@JosephNields Если это не сработает для вас, вы делаете что-то неправильно. – Teemu

<head> 
<script type="text/javascript"> 
    function customizeNavbar() { 
     var d = document.getElementById("navwrap"); 
     d.classList.add("container"); 
     var e = document.getElementById("navhead"); 
     e.classList.add("container"); 
    } 
</script> 
</head> 
<body onload="customizeNavbar();"></body>

поставил OnLoad на теле

источник

2015-02-17 16:10:26

Я не могу поставить нагрузку на тело. Это внутри тела. –

Вы должны позвонить customizeNavbar в onload случае элемента тела, а не в onload отдельного script. Посмотрите here:

<!DOCTYPE html> 
<html> 
<body onload="myFunction()"> 

<h1>Hello World!</h1> 

<script> 
function myFunction() { 
    alert("Page is loaded"); 
} 
</script> 

</body> 
</html>

Как вы можете видеть, myFunction определяется внутри сценария и assigned в onload случае body. Как вы можете видеть, это работает!Теперь, ваш код должен быть изменен следующим образом:

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript"> 
      function customizeNavbar() { 
       var d = document.getElementById("navwrap"); 
       d.classList.add("container"); 
       var e = document.getElementById("navhead"); 
       e.classList.add("container"); 
      } 
     </script> 
    </head> 
    <body> 
     <!--some HTML--> 
    </body> 
</html>

источник

2015-02-17 21:09:12

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

<script type="text/javascript" onload="customizeNavbar();"> 
    function customizeNavbar() { 
     var d = document.getElementById("navwrap"); 
     d.classList.add("container"); 
     var e = document.getElementById("navhead"); 
     e.classList.add("container"); 
    } window.onload = customizeNavbar; 
</script>

источник

2015-02-17 21:17:39

Изменение содержимого с помощью JavaScript на нагрузке

ответ

Смежные вопросы