在页面加载时运行javascript代码,而不使用onload标记

时间:2011-01-18 09:57:40

标签: javascript

如果在不使用onload标记的情况下加载页面时如何运行JavaScript代码?

我正在尝试运行此脚本:

<script type="text/javascript">
function displayLightbox() {
    document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'
}
</script>

显示灯箱。

5 个答案:

答案 0 :(得分:18)

像这样:

window.onload = function WindowLoad(event) {
    alert("Page is loaded");
}

编辑:如果其他一些代码在该脚本之后也使用window.onload,那么它将被“覆盖” - 以确保它被执行(并中止任何其他onload)将其放在底部页面。

编辑2:第二个想法,你最好添加 onload listener而不是覆盖它:

<script type="text/javascript">
if (window.addEventListener) { // Mozilla, Netscape, Firefox
    window.addEventListener('load', WindowLoad, false);
} else if (window.attachEvent) { // IE
    window.attachEvent('onload', WindowLoad);
}

function WindowLoad(event) {
    alert("Another onload script");
}
</script>

这样可以防止与现有代码发生任何冲突,并且据我所知,它更像是跨浏览器。

现场测试用例可在此处获得:http://jsfiddle.net/yahavbr/GZPTG/测试IE8,Chrome和Firefox(最新版本)随时可以测试更多。

答案 1 :(得分:1)

可能会在结束</body>代码之前的页面末尾添加一个javascript代码。

.
.
.
<script>
 yourFunctionHere();
</script>
</body>

答案 2 :(得分:1)

你可以做到

<head>
<script>
document.onload = function() { /*run code here */}
</script>
</head>

更清洁的方式是

<head>
<script>
document.addEventListener('onload',funciton(){
 /* run code here */
});
</script>
</head>

因为这允许多个事件处理程序到同一个事件

更好的方法通常是对domReady做出反应。

大多数JavaScript库都支持简单的方法来挂钩domReady。例如,在jQuery中你可以这样做:

$(function() {
/* code here will be run as soon as the dom is ready to be interacted with, 
   but before document.load occurs which means you don't have to wait for 
   images to load for example
*/
});

答案 3 :(得分:0)

你应该使用onload函数,因为在尝试在不同的浏览器中调试它时会遇到的问题较少。

我知道可靠地模拟这种效果的另一种方法是在页面页脚之前设置一个脚本标记块。

答案 4 :(得分:0)

请注意,页面加载时,标题中脚本标记中的函数外部的命令会运行。我不知道这是否实际上等同于通过body标签属性显式地运行函数 onLoad ,但它等同于同样的事情。