首页html 标签加载后执行js

html 标签加载后执行js

时间: 2024-12-23 18:27:44 浏览: 4

HTML标签中加载JavaScript通常是通过`<script>`标签完成的。当HTML文档解析到包含JavaScript代码的部分时，浏览器会按照一定的规则执行这些脚本。常见的做法有以下几种： 1. **内联JavaScript**： ```html <button onclick="alert('Hello World!')">点击我</button> ``` 当按钮被点击时，会立即执行`onclick`事件中定义的JavaScript函数。 2. **外部链接的JavaScript文件**： ```html <head> <script src="script.js"></script> </head> ``` 如果`script.js`放在`<head>`标签中，JavaScript会在文档开始解析时下载并在文档完全加载前执行。如果放在`<body>`中，比如`<body onload="runFunction()">`，则会在整个页面加载完成后执行`runFunction()`。 3. **使用DOMContentLoaded事件**： ```html <body> <script> document.addEventListener("DOMContentLoaded", function () { console.log('DOM已加载完毕'); // 下面的代码将在此处执行 }); </script> </body> ``` 这种方法确保了只有当DOM结构已经完全加载后才会执行JS。 4. **异步或defer属性**： ```html <script async src="async_script.js"></script> 或 <script defer src="deferred_script.js"></script> ``` `async`会让脚本异步加载，不会阻止页面渲染；`defer`类似`async`，但在文档解析完成后DOMContentLoaded事件触发后再执行。

阅读全文