Загрузите JavaScript в HTML в панели содержимого - PullRequest
Новая
       16

Загрузите JavaScript в HTML в панели содержимого

2 голосов
/ 31 декабря 2011

У меня есть HTML-файл, который я хочу загрузить с разных страниц в dijit.contentpane.Контент загружается нормально (я только установил href в области содержимого), но проблема в том, что javascript в html-файле, заданном href, кажется, не выполняется в согласованное время.

Конечная цельэто необходимо для загрузки html-файла в область содержимого в точке привязки в файле (т. е. если вы набрали index.html # tag , чтобы перейти к определенной части файла).Я пробовал несколько разных методов и, похоже, ничего не получилось.

То, что я пробовал:

1.(ссылаясь на раздел ди-джея. Содержание) 

href="page.htm#anchor"

2.(опять же, ссылаясь на раздел dijit.contentpane - на самом деле не ожидал, что это сработает, но решил попробовать в любом случае) 

href="#anchor"

3.(с этой последней попыткой в ​​html, указанном href) 

<script type="text/javascript">

    setTimeout("go_to_anchor();", 2000);

    function go_to_anchor()
    {
        location.href = "#anchor";
    }
</script>

Эта последняя попытка была наиболее близкой к работе всех из них.Через 2 секунды (я установил задержку, чтобы посмотреть, возможно ли, что-то в коде dijit загружалось одновременно с моим javascript), я смог увидеть, как браузер ненадолго переместился в нужное место на html-странице, но затем сразу вернулсяв начало страницы.

Ответы [ 2 ]

0 голосов
/ 02 января 2012

Если загружаемый вами контент содержит javascript, вы должны использовать dojox.layout.ContentPane.

0 голосов
/ 02 января 2012

Dojo использует хеши в URL, чтобы разрешить закладку страниц, загруженных с помощью вызовов ajax.Это делается через API dojo.hash .Итак ... Я думаю, что лучшее, что вы можете сделать, это использовать его для запуска обратного вызова, который вы пишете на своей главной странице.

Для прокрутки до заданной позиции в загруженном содержимом вы можете использовать узел.scrollIntoView ().

Например, допустим, у вас есть страница с ContentPane с именем «mainPane», в которую вы загружаете HTML-фрагмент с именем «частичный фрагмент», а ваш фрагмент содержит 2 якоря, подобные этому:

-fragment.html: 

<a href="#anchor1">Anchor 1</a>
<p>some very long contents...</p>
<a href="#anchor2">Anchor 2</a>
<p>some very long contents...</p>

Теперь предположим, что у вас есть 2 кнопки на главной странице (с именами btn1 и btn2), которые будут использоваться для загрузки вашего фрагмента и перехода к нужной привязке.Затем вы можете подключить это со следующим javascript на своей главной странице: 

<script type="text/javascript">
        require(['dojo/on', 
                 'dojo/hash', 
                 'dojo/_base/connect', 
                 'dijit/layout/BorderContainer', 
                 'dijit/layout/ContentPane',
                 'dijit/form/Button'], 
                 function(on, hash, connect){
                     dojo.ready(function(){
                         var contentPane = dijit.byId('mainPane');
                         var btn1 = dijit.byId('btn1');
                         var btn2 = dijit.byId('btn2');
                         btn1.on("Click", function(e){
                              if (!(contentPane.get('href') == 'fragment.html')) {
                                  contentPane.set("href", "fragment.html");
                              }
                              hash("anchor1");
                         });

                         btn2.on("Click", function(e){
                              if (!(contentPane.get('href') == 'fragment.html')) {
                                  contentPane.set("href", "fragment.html");
                              }
                              hash("anchor2");
                         });

                         // In case we have a hash in the URL on the first page load, load the fragment so we can navigate to the anchor.
                         hash() && contentPane.set("href", "fragment.html");

                         // This callback is what will perform the actual scroll to the anchor
                        var callback = function(){
                            var anchor = Array.pop(dojo.query('a[href="#' + hash() + '"]'));
                            anchor && anchor.scrollIntoView();
                        };

                        contentPane.on("DownloadEnd", function(e){
                            console.debug("fragment loaded");
                            // Call the callback the first time the fragment loads then subscribe to hashchange topic
                            callback();
                            connect.subscribe("/dojo/hashchange", null, callback);
                        });
                    }); // dojo.ready
            }); // require              
</script>
...