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

Question

I have an html file that I want to be loaded from various pages into a dijit.contentpane. The content loads fine (I just set the href of the contentpane), but the problem is that javascript within the html file specified by href doesn't seem to be executed at a consistent time.

The final goal of this is to load an html file into a contentpane at an anchor point in the file (ie if you typed in index.html#tag in order to jump to a certain part of the file). I've tried a few different methods and can't seem to get anything to work.

What I've tried:

1. (refering to the href of the dijit.contentpane)

href="page.htm#anchor"

2. (again, refering to the href of the dijit.contentpane -- didn't really expect this to work, but decided to try anyways)

href="#anchor"

3. (with this last try inside the html specified by href)

<script type="text/javascript">

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

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

This last try was the closest to working of all of them. After 2 seconds (I put the delay there to see if something in the dijit code was possibly loading at the same time as my javascript), I could see the browser briefly jump to the correct place in the html page, but then immediately go back to the top of the page.

Answer 1

Dojo uses hashes in the URL to allow bookmarking of pages loaded through ajax calls. This is done through the dojo.hash api. So... I think the best thing you can do is use it to trigger a callback that you write inside your main page.

For scrolling to a given position in your loaded contents, you can then use node.scrollIntoView().

For example, say you have a page with a ContentPane named "mainPane" in which you load an html fragment called "fragment.html", and your fragment contains 2 anchors like this :

-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>

Now say you have 2 buttons in the main page (named btn1 and btn2), which will be used to load your fragment and navigate to the proper anchor. You can then wire that up with the following javascript, in your main page :

<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 。