Question

我有一个html文件，我希望从各个页面加载到dijit.contentpane。内容加载正常（我只是设置了contentpane的href），但问题是href指定的html文件中的javascript似乎没有在一致的时间执行。

这样做的最终目标是将html文件加载到文件中锚点的内容窗格中（例如，如果您输入 index.html＃tag 以跳转到某个部分的文件）。我尝试过几种不同的方法，似乎无法发挥作用。

我尝试了什么：

1。（参考dijit.contentpane的href）

href="page.htm#anchor"

2。（再次，参考dijit.contentpane的href - 真的没想到这会起作用，但决定尝试一下）

href="#anchor"

3。（最后一次尝试在href指定的html中）

<script type="text/javascript">

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

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

最后一次尝试最接近所有人的工作。 2秒后（我把延迟放在那里，看看dijit代码中的某些内容是否可能与我的javascript同时加载），我可以看到浏览器短暂跳转到html页面中的正确位置，但后来立即返回到页面顶部。

Answer 1

Dojo在URL中使用哈希来允许通过ajax调用加载的页面的书签。这是通过dojo.hash api完成的。所以...我认为你能做的最好的事情就是用它来触发你在主页面写的回调。

要滚动到已加载内容中的给定位置，可以使用node.scrollIntoView（）。

例如，假设您有一个名为“mainPane”的ContentPane页面，您在其中加载名为“fragment.html”的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>

现在假设您在主页面中有两个按钮（名为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>

Answer 2

如果您加载的内容包含javascript，则应使用dojox.layout.ContentPane。

在内容窗格中的html中加载javascript

2 个答案: