Событие загрузки Javascript не работает должным образом - PullRequest
Новая
       34

Событие загрузки Javascript не работает должным образом

0 голосов
/ 27 августа 2018

Я хочу отображать предупреждение после отображения кнопки, т.е. после загрузки страницы.

<input type='button' id='lognBtn' value='btn' />
<script>
    window.addEventListener("load", function(){ alert(20); });
</script>

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

Ответы [ 5 ]

0 голосов
/ 27 августа 2018

Вы можете использовать метод setTimeout (), чтобы создать задержку для вызова оповещения после загрузки страницы 

window.onload = function(){ 
 if(document.getElementById("demo")){
   setTimeout(function(){ alert("Hello"); }, 1000);
 }
} 
<!DOCTYPE html>
<html>
<body>
<button id="demo"></button>
</body>
</html>
0 голосов
/ 27 августа 2018

Это работает, как и ожидалось ... просто предупреждение является блокирующим событием для браузера, и вы должны нажать на него, чтобы продолжить.Из приведенного ниже примера видно, что в предупреждении отображается значение кнопки, хотя кнопка сама по себе не «показана»: 

<input type='button' id='lognBtn' value='helloBtn'/>
<script>
    window.addEventListener("load", function(){ 
	alert(document.getElementById('lognBtn').value) 
    });
</script>

Вы можете переключиться на обработчик событий на кнопке или использовать setTimeout , как показано здесь

0 голосов
/ 27 августа 2018

Вы можете использовать window.onload событие.На самом деле, предупреждение отображается после загрузки DOM, но вы не можете обнаружить разницу после отображения кнопки, а затем предупреждение выходит.Вы можете использовать setTimeout в течение 1 секунды. 

window.onload = function(){
  setTimeout(function(){ alert(20)},1000);
}
<!DOCTYPE html>
<html>
<body>
  <input type='button' id='lognBtn' value='helloBtn'/>
</body>
</html>
0 голосов
/ 27 августа 2018

Решение довольно простое.Вы используете load, поэтому браузер отобразит его, как только страница загрузится.Просто измените его на click примерно так, и вы получите предупреждение после нажатия кнопки, что дает вам некоторый контроль над тем, когда должно появиться предупреждение, и дает время для отображения кнопки до предупреждения.

<input type='button' id='lognBtn' value='btn' />
	<script>
		window.addEventListener("click", function(){ alert(20); }); //change here
	</script>
0 голосов
/ 27 августа 2018

Это может быть так же просто, как поменять местами порядок <script> и <input/> в вашем HTML: 

<script>
    document.addEventListener("DOMContentLoaded", function() { 
        alert(20); 
    });
</script>
<input type='button' id='lognBtn' value='btn' />

Как правило, я бы все равно рекомендовал использовать DOMContentLoaded для таких вещей.Для получения дополнительной информации об этом событии см. Документацию MDN

...