更正 <body onload=的等效 JavaScript>

替换<body onload="init();">的正确JavaScript方法是什么?请记住，我们不再需要支持非常旧的浏览器。

在我的情况下，我想添加一个onClick事件到所有标签，并希望保持Javascript独立于我的HTML页面。

window.onload = init();

从这个开始，但发现全局文档对象在init()中不可用，这似乎是它似乎是一个时间问题。它在旧的浏览器中工作得更好吗?

document.addEventListener("DOMContentLoaded", init, false);

似乎是一个更现代可靠的方式，但这是所有现代浏览器支持吗?

然后有一个建议，只是把init()在页面的底部，但这显然是回到有Javascript直接在HTML。

<script type="text/javascript">init();</script>

是否有一个明确的方式，我应该运行我的初始化代码?

我认为你想要的是$(function(){})，或$(document).ready(...)，正如Marc B提到的。这似乎达到了你的要求，除非我误解了你的问题。jQuery API支持这个。

.ready()方法提供了一种方法，只要页面的文档对象模型(DOM)变得可以安全操作，就可以运行JavaScript代码。

最简单的方法是在body的末尾添加一个带有自调用匿名函数的script标签:

<body>
<!-- content here -->
<script type="text/javascript">
(function() {
    //Run init code here
})();
</script>
</body>

对于外部js文件:

<body>
<!-- content here -->
<script src="main.js" type="text/javascript"></script>
</body>

main.js文件:

(function() {
    //Run init code here
})();

现在额外括号的问题已经解决了，我要测试的最终解决方案是:

if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init);
} else {
  window.onload = init;
}

我知道JQuery可以通过它的。ready事件做到这一点，但其中一些页面是非常小的Ajax内容页面，如果没有必要，我宁愿避免JQuery的开销

相关内容