页面载入 JavaScript
JavaScript 是一种脚本语言，它允许你在网页上实现复杂的功能，在页面载入时执行 JavaScript 代码是很常见的需求，例如初始化一些变量、设置事件监听器或执行某些操作等，本文将介绍几种常见的在页面载入时执行 JavaScript 代码的方法。
方法一：使用<script>
在 HTML 文档中，可以使用<script> 标签来嵌入 JavaScript 代码，当浏览器解析到<script> 标签时，会立即执行其中的代码，如果你将<script> 标签放在 HTML 文档的底部，那么当浏览器解析到这里时，页面应该已经加载完毕，此时执行 JavaScript 代码就相当于在页面载入后执行。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<! 页面内容 >
<script>
// 在这里写你的 JavaScript 代码
console.log("页面已载入");
</script>
</body>
</html> 方法二：使用window.onload 事件
window.onload 是一个事件，它会在整个页面（包括所有图像、脚本文件、CSS 文件等）都加载完成后触发，你可以在window.onload 事件处理函数中写入需要在整个页面加载完成后执行的 JavaScript 代码。
window.onload = function() {
// 在这里写你的 JavaScript 代码
console.log("页面已载入");
} 方法三：使用DOMContentLoaded 事件
DOMContentLoaded 事件会在初始 HTML 文档被完全加载和解析完成后触发，不需要等待样式表、图像和子框架的完成加载，这个事件的触发比window.onload 要早，因此如果你的 JavaScript 代码不依赖于这些资源，那么使用DOMContentLoaded 事件可能会有更好的性能。
document.addEventListener("DOMContentLoaded", function() {
// 在这里写你的 JavaScript 代码
console.log("DOM已载入");
}); 相关问题与解答
问题1：如果在<script> 标签中的 JavaScript 代码执行过程中发生错误，后续的 HTML 解析是否会停止？
答：不会，浏览器在解析到<script> 标签并开始执行 JavaScript 代码时，如果遇到错误，它会把错误记录到控制台，但不会停止 HTML 的解析过程。
问题2：window.onload 和DOMContentLoaded 事件有什么区别？
答：window.onload 事件在整个页面（包括所有图像、脚本文件、CSS 文件等）都加载完成后触发，而DOMContentLoaded 事件只在初始 HTML 文档被完全加载和解析完成后触发，不需要等待样式表、图像和子框架的完成加载。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1070776.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复