如何在 ejs 中提醒负载

Question

我似乎无法在 ejs 中使警报正常工作。基本上我希望在页面加载和可见时出现警报，但我无法做到这一点。我已经深入了解 Stack 并尝试使用 JS 和 jQuery 做很多不同的事情，但它们所做的只是在页面可见之前发出警报，我有一个带有警报的空白屏幕，单击“确定”后页面变得可见。我正在 Opera 中对其进行测试。

也许不仅仅是脚本，我还漏掉了什么？

PS。 window.onload 函数似乎可以在普通 html 文件中正常工作，但在加载某些 css 之前会显示警报。只是测试。发现它很奇怪。

PS。好吧，现在看来真的很奇怪。显然，该页面实际上已加载，但我没有看到它刷新。如果我刷新页面，我会看到警告，但页面是空白的。但是，如果我将浏览器最小化然后重新打开，页面就在那里。到底是怎么回事？ Video

    <%- include('partials/header'); -%>
    
    <body>
    
      <script>
        window.onload = () =>{
            alert("fully loaded");
        }
      </script>
    
    <div id="formDiv" class="flexbox-container">
      <form action="/addword" method="post" class="ml-auto mr-auto mt-auto mb-auto" id="wordaddFrom" required>
    <div class="form-group">
        <input type="text" class="form-control" id="wordInput" name="wordInput" placeholder="Word" required>
    </div>
    <div class="form-group">
          <input type="text" class="form-control" id="defInput" name="defInput" placeholder="Definition" required>
    </div>
    <div class="form-group">
          <input type="text" class="form-control" id="exInput" name="exInput" placeholder="Example" required>
    </div>
    <div class="form-group">
          <input type="text" class="form-control" id="defInput" name="titleInput" placeholder="Title" required>
    </div>
    <div class="form-group">
    <select class="form-control" name=genreInput placeholder="Genre">
     <option value="" disabled selected hidden>Genre</option>
      <option>Games</option>
      <option>Movies</option>
      <option>Books</option>
    </select>
    </div>
    <ul class="list-inline">
      <li class="list-inline-item"><button type="submit" class="btn btn-primary">Submit</button></li>
    </ul>
    </form>
    </div>
    
    
    
    </body>
    
    
    <%- include('partials/footer'); -%>

app.get("/addword", function(req, res) {

res.render("addword");

});

app.post("/addword", function(req, res){

  var newWord = new Dicword ({

    word: req.body.wordInput,
    definition: req.body.defInput,
    title: req.body.titleInput,
    genre: req.body.genreInput,
    example: req.body.exInput
  });


  Dicword.exists({word: req.body.wordInput}, (function(err, existingDoc){

if (existingDoc === null) {

  newWord.save(function(err){
    if (!err){
      console.log("add succ");
      res.render("addwordSUCC");
    }

    else {console.log(err);}
  });
} else {

let exists = "This word already exists"
res.render("addwordFAIL", {exists: exists});
}


}));

Answer 1

window.onload 函数仅在运行加载页面时，setTimeout 函数将等待 css 加载。

你可以试试

window.onload = () =>{
    setTimeout(function() {
        alert("fully loaded");
    }, 500);
}

或

let everythingLoaded = setInterval(function() {
  if (/loaded|complete/.test(document.readyState)) {
    clearInterval(everythingLoaded);
    init(); // this is the function that gets called when everything is loaded
  }
}, 10);

function init() {
    alert('Hello World');
}

或

document.addEventListener('readystatechange', event => { 
  // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
  if (event.target.readyState === "complete") {
     init();
  }
})

function init() {
  alert('Hello World');
}

或者在 Opera 和 Safari 中与以前相同，但唯一的变化是我将警报代码嵌套在 setTimeout 函数中。

document.addEventListener('readystatechange', event => { 
  // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
  if (event.target.readyState === "complete") {
     init();
  }
})

function init() {
   setTimeout(function() {
      alert('Hello World');
   }, 100);
}

Solution Video

如何在 ejs 中提醒负载

How to alert on load in ejs

javascript

ejs

node.js