HTML - 加载页面时的警告框

Question

我正在使用HTML代码，希望显示一个警告消息或警告框，我不知道它被称为什么，但是它是一个带有“OK”按钮的消息。

我希望在页面加载时显示此警报。

我应该如何做到这一点？

并且如何在警报框中添加标题？

我需要JavaScript吗？如果不需要，如何在没有JavaScript的情况下实现？

乔纳森

- Jonathan Gurebo

---

你需要使用JavaScript。寻找一个警告按钮。 - thatidiotguy

Answer 1

是的，你需要JavaScript。最简单的方法就是在HTML页面底部添加以下代码：

<script type="text/javascript">
alert("Hello world");
</script>

还有更好的方法，比如使用jQuery的ready函数，但这种方法也可以起作用。

- Adam Plocher

---

谢谢，但是你知道如何为警告消息框设置标题吗？ - Jonathan Gurebo

无法使用JavaScript中的标准警告框完成此操作。您可以使用更复杂的DHTML解决方案来实现类似的功能。使用像“Shanimal”建议的东西可能会做到这一点。 - Adam Plocher

Answer 2

你需要一点点 JavaScript。

<script type="text/javascript">
window.onload = function(){ 
                alert("Hi there");
                }
</script>

这与Adam的答案略有不同。有效的区别在于，这个会在浏览器认为页面已经完全加载时发出警报，而Adam的则是在浏览器扫描文本中的<script>标签时发出警报。例如，图像可能会继续并行加载一段时间。

- Charlie Martin

---

谢谢，但是你知道如何为警告消息框设置标题吗？ - Jonathan Gurebo

不，从警告框中获取的框是由浏览器定义的。 - Charlie Martin

Answer 3

您可以使用多种方法，其中一种是在脚本中使用Javascript window.onload函数进行简单的函数调用，或者像上面的解决方案中一样从正文中调用。您还可以使用jQuery来完成此操作，但它只是Javascript的修改...只需将Jquery粘贴到头部即可。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

请将以下内容添加到您的head部分，并打开另一个脚本标签，以在DOM准备就绪时显示警报，即`

<script>
    $("document").ready( function () {
        alert("Hello, world");
    }); 
</script>

这里使用Jquery运行函数，但由于Jquery是一个Javascript框架，因此其中包含了Javascript代码，如Javascript的alert函数。希望这能帮到您。

- Gash

Answer 4

如果你使用jqueryui（或其他工具集），以下是操作步骤： http://codepen.io/anon/pen/jeLhJ HTML

<div id="hw" title="Empty the recycle bin?">The new way</div>

javascript

$('#hw').dialog({
    close:function(){
        alert('the old way')
    }
})

更新：如何通过指向CDN来包含jqueryui

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

- Shanimal

---

谢谢，但您知道如何为警告消息框设置标题吗？ - Jonathan Gurebo

请注意，使用此解决方案需要在页面上包含JQuery、JQuery UI和JQuery UI主题。这比使用简单的Javascript警报框要复杂得多，但您应该至少能够更改标题（当然它看起来非常酷）。 - Adam Plocher

除了jqueryui之外还有其他库。 - Shanimal

这是 http://jqueryui.com/dialog 的文档。另外别忘了你可以使用 cdnjs 或其他 CDN 来获取 jqueryui 代码和 CSS。 - Shanimal

我已更新CodePen和上面的代码，以包括标题。 - Shanimal

Answer 5

在页脚中加入以下JavaScript代码即可创建警报。

<script> 
 $(document).ready(function(){
    alert('Hi');
 });
</script>

您还需要加载jquery min文件。 请在头部插入此脚本。

<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.0.min.js'></script>

- Alpesh

Answer 6

<script type="text/javascript">
    window.alert("My name is George. Welcome!")
</script>

- vikas awasthi

Answer 7

你可以试试这个。

$(document).ready(function(){      
  alert();
     $('#rep‌​ortVariablesTable tbody').append( '<tr><td>lll</td><td>lll</td></tr>');
}); 

- Vi J

Answer 8

<script> 
    $(document).ready(function(){
        alert('Hi');
    });
</script>

- user5197904