Question

即使我将脚本标记放在body标记的末尾上方，只有在单击弹出窗口后才能加载页面。我该怎么办？

<!DOCTYPE html> 
 <html lang="en" dir="ltr">  
   <head>   
    <meta charset="utf-8">  
    <title></title>
   </head> 
   <body>    
    <h1>this is for beginners javascript</h1>   
    <div>  <p>this is a div</p>   </div> 
    <script src="js_notes.js"></script>  
   </body>  
 </html>

js_notes.js只包含下面给出的这一行

alert('hello world');

Answer 1

你想做什么？加载html时将始终读取js文件。如果你想在事件发生时加载弹出窗口（例如点击div：这是一个div），只需使用onclick函数。

在你的js_notes.js中：

function showpopup() {
  alert('hello');
}

如果您只想等待页面加载，可以使用window.onload或计时器（setTimeout（showpopup，1000））

在你的html文件中：

<div onclick='showpopup()'>Text Content Here</div>

Answer 2

您可以尝试一些事情并确定最适合您的方式。

<script async="async" src="js_notes.js"></script>

简而言之，“不要停止浏览器之类的东西，比如渲染页面来处理js_notes.js中的javascript”。有时也与defer属性一起使用。您可以在以下位置详细了解这些属性： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

这可能不是您想要的。相反，你可能想要确保你的页面已加载和绘制。这个函数（或jquery ready()）可能会有所帮助。

function docReady(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

但是，您可能希望添加一点异步暂停以使页面有机会进行绘制。

setTimeout(function(){
  alert('hello world');
}, 1 * 1000);

即使我将脚本标记放在body标记的末尾上方，只有在单击弹出窗口后才能加载页面

2 个答案: