2

我想在显示按钮后显示警报，即在页面加载后。

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

使用此代码，警报会在页面加载之前显示。我也试过DOMContentLoaded。请帮忙。

4

5 回答 5

1

它按预期工作......只是警报是浏览器的阻塞事件，您必须单击它才能继续。您可以从下面的示例中看到，尽管按钮本身并未“显示”，但警报会显示按钮值：

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

您可以切换到按钮上的事件处理程序或使用 setTimeout ，如下所示

于 2018-08-27T05:29:23.580 回答
1

您可以使用 setTimeout() 方法创建延迟以在页面加载后调用警报

window.onload = function(){ 
 if(document.getElementById("demo")){
   setTimeout(function(){ alert("Hello"); }, 1000);
 }
} 
<!DOCTYPE html>
<html>
<body>
<button id="demo"></button>
</body>
</html>

于 2018-08-27T06:10:12.893 回答
0

This may be as simple as swaping the order of <script> and <input/> in your HTML:

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

Generally, I would recommend using DOMContentLoaded for such things anyway. For more information on this event, see the MDN documentation

于 2018-08-27T05:00:52.333 回答
0

解决方案非常简单。您正在使用load，因此浏览器将在页面加载后立即显示它。只需将其更改为click这样，您将在单击按钮后收到警报，因此您可以控制警报何时出现，并为按钮在警报之前呈现时间留出时间。

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

于 2018-08-27T05:14:00.987 回答
-1

您可以使用window.onload事件。实际上，在DOM加载后显示警报，但您无法检测到按钮显示后的差异，然后警报就出来了。您可以使用setTimeout1 秒钟。

window.onload = function(){
  setTimeout(function(){ alert(20)},1000);
}
<!DOCTYPE html>
<html>
<body>
  <input type='button' id='lognBtn' value='helloBtn'/>
</body>
</html>

于 2018-08-27T05:08:32.613 回答