在页面显示之前加载 Javascript 提示

Question

我在我的页面上添加了一个提示，但它在页面加载之前加载。 一旦整个页面可见，我如何只显示消息？

这是我的提示：

if (name == null || name == "") {
  txt == "No name provided";
} else {
  txt = "Hello, " + name + "! How are you today?";
}
alert(txt);

Answer 1

如果您将代码包装在侦听DOMContentLoaded事件的事件侦听器中，它将仅在文档准备好后运行：

window.addEventListener('DOMContentLoaded', (e)=>{
  if (name == null || name == "") {
    txt == "No name provided";
  } else {
    txt = "Hello, " + name + "! How are you today?";
  }
  alert(txt);
});

但是，我已将您的原始代码调整为：

 window.addEventListener('DOMContentLoaded', (e) => { // assign the name via the prompt() interface, and // declare both variables (rather than accidentally // creating globals): let name = prompt("Hi, what's your name?"), txt; // name won't be null, but it may be falsey, so here // we check if the name is falsey: if (!name) { // if the user cancels the prompt, prompt() returns // false; if they provide an empty-string that // empty string is falsey: txt = "No name provided"; // if the name variable is truthy: } else { // we use a template literal String to interpolate // the variable 'name' into that string: txt = `Hello, ${name}! How are you today?`; } // I wouldn't recommend alert, but I left this unchanged: alert(txt); });

JS 小提琴演示。

参考：

Answer 2

所以要解决页面显示前提示加载的问题：

将您的script标签放在结束</body>之前，而不是在<head>标签中。
David Thomas建议的其他选项是使用DOMContentLoaded和addEventListener或简单地使用window.onload来收听DOM 。

Answer 3

执行此操作的最简单方法之一必须是： window.onload = alert("text"); . 此外，请考虑将代码放在结束body标记之前或使用某种事件侦听器来进一步控制消息显示。

在页面显示之前加载 Javascript 提示

问题描述

3 个解决方案

解决方案1
4 已采纳 2022-07-11 11:29:12

解决方案2
2 2022-07-11 11:32:01

解决方案3
0 2022-07-11 11:35:28

在页面显示之前加载 Javascript 提示

问题描述

3 个解决方案

解决方案1 4 已采纳 2022-07-11 11:29:12

解决方案2 2 2022-07-11 11:32:01

解决方案3 0 2022-07-11 11:35:28

解决方案1
4 已采纳 2022-07-11 11:29:12

解决方案2
2 2022-07-11 11:32:01

解决方案3
0 2022-07-11 11:35:28