页面加载后移动到 div。 “鼠标悬停时”有效,但“window.onload”不可用不
我有一个正在动态生成的页面(和 div),我需要该页面做的是在页面加载后立即滚动到特定的 div。这段代码的奇怪之处在于......
下面的“按钮”代码,当您将鼠标放在它上面(或onclick
)时,可以完美地工作。它完美地执行了rolldownTo函数。但是,当我尝试使用 window.onload 指定相同的操作时,什么也没有发生。我已经包含了“button”代码和下面的window.onload
。
<html>
<head>
<title>Help</title>
<script LANGUAGE="JavaScript1.2" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="usePlainJson : true, parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.window");
function rolldownTo(my_anchor){
dojo.window.scrollIntoView(my_anchor);
}
window.onload=rolldownTo('car_help');
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs /dojo/1.5/dijit/themes/claro/claro.css"/>
</head>
<body class="claro">
<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<div dojoType="dijit.layout.TabContainer" region="center">
<div dojoType="dijit.layout.ContentPane" title="CAR HELP" selected=true>
<button type=button id=button1 onmouseover="rolldownTo('car_help');">
scroll to car_help
</button>
........
LOTS OF DIVS LIVE IN THIS DIV, INCLUDING MY TARGET "car_help"
........
</div>
<div dojoType="dijit.layout.ContentPane" title="BIKE HELP" selected=false>
........
........
</div>
</div>
</div>
<script language="JavaScript1.2" type="text/javascript">
.... LOTS OF CODE THAT GENERATES CONTENT FOR THE DIVS ABOVE
</script>
</body>
</html>
有谁知道为什么像 onmouseover
或 onclick
这样的 Javascript 事件可以完美工作,但 window.onload
却不能?
I have a page (and divs) that are being dynamically generated and what I need for this page to do is to scroll to a particular div immediately after the page loads. What is screwy about this code is this...
The "button" code below, when you run the mouse over it (or onclick
), works perfectly. It executes the rolldownTo
function perfectly. However when I try to specify to specify the same action using window.onload,
nothing happens. I have included both the "button " code and the window.onload
below.
<html>
<head>
<title>Help</title>
<script LANGUAGE="JavaScript1.2" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="usePlainJson : true, parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.window");
function rolldownTo(my_anchor){
dojo.window.scrollIntoView(my_anchor);
}
window.onload=rolldownTo('car_help');
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs /dojo/1.5/dijit/themes/claro/claro.css"/>
</head>
<body class="claro">
<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<div dojoType="dijit.layout.TabContainer" region="center">
<div dojoType="dijit.layout.ContentPane" title="CAR HELP" selected=true>
<button type=button id=button1 onmouseover="rolldownTo('car_help');">
scroll to car_help
</button>
........
LOTS OF DIVS LIVE IN THIS DIV, INCLUDING MY TARGET "car_help"
........
</div>
<div dojoType="dijit.layout.ContentPane" title="BIKE HELP" selected=false>
........
........
</div>
</div>
</div>
<script language="JavaScript1.2" type="text/javascript">
.... LOTS OF CODE THAT GENERATES CONTENT FOR THE DIVS ABOVE
</script>
</body>
</html>
Does anyone have an idea why a Javascript event like onmouseover
or onclick
would work perfectly but window.onload
will not?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您的问题是这一行:
您没有将函数
rolldownTo
指定为onload
事件的回调,而是执行该函数并分配返回值,在本例中为undefined
。您需要使用匿名函数包装调用才能使其正常工作:
现在,
onload
事件将调用匿名函数,然后调用rolldownTo
。问题就这么多,正如 NiL 中途指出的那样(
onload
在 DOMLoaded 之后触发),您可以使用dojo.addOnLoad
而不是window.onload
在这里,但由于上述原因,您仍然必须使用匿名函数。Your problem is this line:
You're not assigning the function
rolldownTo
to as the callback for theonload
event, you're executing the function and assigning the return value, in this caseundefined
.You need to wrap the call with an anonymous function in order to make it work:
Now the anonymous function will get called by the
onload
event and then callrolldownTo
.So much for the problem, as NiL has halfway pointed out (
onload
fires after DOMLoaded) you can usedojo.addOnLoad
instead ofwindow.onload
here, but you still have to use the anonymous function for the reasons stated above.页面加载并不意味着 DOM 树已完全初始化,这意味着除非树完成工作,否则您的脚本无法移动 div,您必须使用 javascript 事件 DOMContentLoaded 等待它完成。
在dojo中,有一个可以调用的函数,它会等待浏览器完成DOM树,你可以将它用作:
我希望这对你有用
最好的祝福
零
The page load doesn't mean the the DOM tree has been fully initialized which mean that your script cannot move the div unless the tree finish working, you must wait it until finished by using the javascript Event DOMContentLoaded.
In dojo, There is a function that can be called, it waits until the browser finish the DOM Tree, you can use it as :
I hope this would work for you
Best Regards
NiL