JavaScript 可以在之前或之后加载HTML
,但是根据您的操作方式,完成的方式略有不同。
例如,如果您希望将 JavaScript 文件包含在head
of the HTML
文件那么你必须包装你的JavaScript
代码与任一DOMContentLoaded
或者 jQuery 的$(document).ready()
.
使用的常见误解window.onload
不会解决元素未正确加载的问题。
Mozilla 开发者网络指出this https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded page:
当初始 HTML 文档完全加载和解析后,将触发 DOMContentLoaded 事件,无需等待样式表、图像和子框架完成加载。一个非常不同的事件 - load - 应该仅用于检测完全加载的页面。在 DOMContentLoaded 更合适的情况下使用 load 是一个非常普遍的错误,所以要小心。
这句话本身就应该证明onload
不应该依赖if您希望在开始操作之前正确加载完整的 DOM。相反,您应该执行以下操作:
Vanilla
document.addEventListener("DOMContentLoaded", function (e) {
/** DOM has been fully loaded here, so manipulation can begin. **/
/** Your code here. **/
});
jQuery
$(document).ready(function () {
/** DOM has been fully loaded here, so manipulation can begin. **/
/** Your code here. **/
});
Click this https://stackoverflow.com/questions/11523359/is-domcontentloaded-event-exactly-the-same-as-jquerys-ready-function链接查看 vanilla 和 jQuery 之间的区别。
加载 JavaScript 的第二种方法是在正文中包含所有脚本标记,但在所有 HTML 之后,这样可以保证在 HTML 之后加载。
Example
尝试一下我快速编写的这个工作示例。
HTML
替换里面的内容body
你的标签HTML
至以下内容:
<button id="myJsTest">Click Me!</button>
<div id="clickCounter">Click Count: 0</div>
将 JavaScript 的内容替换为以下内容:
JavaScript
document.addEventListener("DOMContentLoaded", function() {
var clickCount = 0;
document.getElementById("myJsTest").addEventListener("click", function() {
clickCount++;
document.getElementById("clickCounter").innerText = "Click Count: " + clickCount;
});
});
然后使用EmulateIntel XDK 中的选项卡进行测试。
附加信息
当我使用 Intel XDK 时出现错误,我会快速将文件加载到浏览器中并检查控制台。这可能是消灭那些讨厌的小虫子的一种非常有用且有效的方法。
尝试使用window.alert
as alert
定义在window
object.