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

Question

我有一个 html 文件，我想将其从各个页面加载到 dijit.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>

现在假设您有 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>

Answer 2

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