Javascript: переход к разделу после загрузки страницы. "onmouseover" работает, но "window.onload" не работает - PullRequest
Новая
       68

Javascript: переход к разделу после загрузки страницы. "onmouseover" работает, но "window.onload" не работает

0 голосов
/ 07 января 2011

У меня есть страница (и элементы div), которые генерируются динамически, и мне нужно, чтобы эта страница выполнила прокрутку до определенного элемента div сразу после загрузки страницы.Что не так в этом коде, так это ...

Код "кнопки", приведенный ниже, когда вы наводите на него мышь (или нажимаете на нее), работает отлично.Он отлично выполняет функцию rolldownTo.Однако, когда я пытаюсь указать, чтобы указать то же действие с помощью window.onload, ничего не происходит.Я включил и код кнопки, и файл 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>

У кого-нибудь есть идея, почему событие javascript, например onmouseover или onclick, будет работать идеально, а window.onload - нет?Большое большое спасибо!Джени

Ответы [ 2 ]

3 голосов
/ 07 января 2011

Ваша проблема в этой строке: 

window.onload=rolldownTo('car_help');

Вы не назначаете функцию rolldownTo в качестве обратного вызова для события onload, вы выполняете функция и присвоение возвращаемого значения, в данном случае undefined.

Вам нужно обернуть вызов анонимной функцией, чтобы он заработал: 

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

Теперь анонимная функциябудет вызван событием onload и затем вызовет rolldownTo.

Так много для проблемы, так как NiL уже наполовину указал (onload срабатывает после DOMLoaded), вы можетеиспользуйте dojo.addOnLoad вместо window.onload здесь, но вам все равно придется использовать анонимную функцию по причинам, указанным выше.

2 голосов
/ 07 января 2011

Загрузка страницы не означает, что дерево DOM полностью инициализировано, что означает, что ваш сценарий не может переместить div, пока дерево не завершит работу, вы должны дождаться его завершения, используя javascript Event DOMContentLoaded .

В dojo, есть функция, которую можно вызвать, она ждет, пока браузер завершит работу с DOM Tree, вы можете использовать ее как: 

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

Надеюсь, это сработаетдля вас

С наилучшими пожеланиями NiL

...