页面加载后移动到 div。 “鼠标悬停时”有效,但“window.onload”不可用不

发布于 2024-10-10 21:58:02 字数 2219 浏览 6 评论 0原文

我有一个正在动态生成的页面(和 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>

有谁知道为什么像 onmouseoveronclick 这样的 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

沉鱼一梦 2024-10-17 21:58:02

您的问题是这一行:

window.onload=rolldownTo('car_help');

您没有将函数 rolldownTo 指定为 onload 事件的回调,而是执行该函数并分配返回值,在本例中为undefined

您需要使用匿名函数包装调用才能使其正常工作:

window.onload = function(){ rolldownTo('car_help'); };

现在,onload 事件将调用匿名函数,然后调用 rolldownTo

问题就这么多,正如 NiL 中途指出的那样(onload 在 DOMLoaded 之后触发),您可以使用 dojo.addOnLoad 而不是 window.onload 在这里,但由于上述原因,您仍然必须使用匿名函数。

Your problem is this line:

window.onload=rolldownTo('car_help');

You're not assigning the function rolldownTo to as the callback for the onload event, you're executing the function and assigning the return value, in this case undefined.

You need to wrap the call with an anonymous function in order to make it work:

window.onload = function(){ rolldownTo('car_help'); };

Now the anonymous function will get called by the onload event and then call rolldownTo.

So much for the problem, as NiL has halfway pointed out (onload fires after DOMLoaded) you can use dojo.addOnLoad instead of window.onload here, but you still have to use the anonymous function for the reasons stated above.

鱼窥荷 2024-10-17 21:58:02

页面加载并不意味着 DOM 树已完全初始化,这意味着除非树完成工作,否则您的脚本无法移动 div,您必须使用 javascript 事件 DOMContentLoaded 等待它完成。

在dojo中,有一个可以调用的函数,它会等待浏览器完成DOM树,你可以将它用作:

dojo.addOnLoad(function(){rolldownTo('car_help');});

我希望这对你有用

最好的祝福

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 :

dojo.addOnLoad(function(){rolldownTo('car_help');});

I hope this would work for you

Best Regards
NiL

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文