{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 闹够了就滚 的问题《[removed] seems to trigger before the DOM is loade》','https://www.manongdao.com/q-98872.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am having trouble with the window.onload and document.onload events. Everything I read tells me these will not trigger until the DOM is fully loaded with all its resources, it seems like this isn't happening for me:
I tried the following simple page in Chrome 4.1.249.1036 (41514) and IE 8.0.7600.16385 with the same result: both displayed the message "It failed!", indicating that myParagraph is not loaded (and so the DOM seems incomplete).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript">
window.onload = doThis();
// document.onload gives the same result
function doThis() {
if (document.getElementById("myParagraph")) {
alert("It worked!");
} else {
alert("It failed!");
}
}
</script>
</head>
<body>
<p id="myParagraph">Nothing is here.</p>
</body>
</html>
I am using more complex scripts than this, in an external .js file, but this illustrates the problem. I can get it working by having window.onload set a timer for half a second to run doThis(), but this seems like an inelegant solution, and doesn't answer the question of why window.onload doesn't seem to do what everyone says it does. Another solution would be to set a timer that will check if the DOM is loaded, and if not it will just call itself half a second later (so it will keep checking until the DOM is loaded), but this seems overly complex to me. Is there a more appropriate event to use?
At the time window is loaded the body isn't still loaded therefore you should correct your code in the following manner:
Tested to work in FF/IE/Chrome, although thinking about handling
document.onloadtoo.As already mentioned, using js-frameworks will be a far better idea.
It's important to understand that
()is an operator, just like+or&&.()Takes a function and calls it.So in that case,
doThisis a function object, and()is the operator that calls the function.doThis()combined to together callsdoThis, executes it, and evaluates to the return value ofdoThisSo
window.onload = doThis()is basically assigning the return value ofdoThistowindow.onloadAnd thus, to fix that, you need to reference the function itself, not call it.
Do
window.onload = doThisHave you tried using a javascript library instead, e.g. jQuery and it's
$(document).ready()function:It depends where you put the onload function (head or body tag or further down), with internal event binding seeemingly slightly different in different browsers.
See also window.onload vs document.onload
Just use
window.onload = doThis;instead ofwindow.onload = doThis();