html动态加载script

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>动态添加JavaScript代码</title>  
</head>  
<body>  <h1>Hello, World!</h1>  <button onclick="addScript()">点击添加脚本</button>  <script>  function addScript() {  // 创建一个新的script元素  var script = document.createElement("script");  // 设置脚本的内容  script.textContent = `  document.body.innerHTML += "<p>这是一段动态添加的文本。</p>";  `;  // 将脚本添加到body元素  document.body.appendChild(script);  }  </script>  
</body>  
</html>

当HTML文档被完全加载和解析完成时，DOMContentLoaded事件会被触发。这比load事件更早，因为在DOMContentLoaded事件触发时，样式表、图像和子框架可能还没有完全加载。

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>Dynamic Script Loading</title>  
</head>  
<body>  <script>  document.addEventListener("DOMContentLoaded", function() {  var script = document.createElement("script");  script.src = "path/to/your/script.js";  document.body.appendChild(script);  });  </script>  
</body>  
</html>

当一个资源（如脚本、图像或样式表）完成加载时，load事件被触发。这通常用于检测外部资源是否已完全加载。

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>Dynamic Script Loading</title>  
</head>  
<body>  <script>  window.addEventListener("load", function() {  var script = document.createElement("script");  script.src = "path/to/your/script.js";  document.body.appendChild(script);  });  </script>  
</body>  
</html>

使用jQuery，你可以使用$(document).ready()方法来确保在DOM加载完成后执行代码。这与DOMContentLoaded事件类似。

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>Dynamic Script Loading</title>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  
</head>  
<body>  <script>  $(document).ready(function() {  var script = document.createElement("script");  script.src = "path/to/your/script.js";  document.body.appendChild(script);  });  </script>  
</body>  
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/578086.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！