How to navigate() Based on a URL Hash Location

This article describes how to enable linkable, bookmarkable, shareable URLs for locations in the Author API.

The simplest way of enabling routing in your application is to push the Author API instance's location to the browser's hash location, and vice-versa.

To push the location to the browser hash, you can listen for the navigate event, then replace the location hash using the given Author API location data.

To push the browser's current hash location to the Author API instance, you can use the navigate() public method, then listen to hashchange events on window to continue pushing the location when the user utilises browser navigation (e.g. back, forward, history, etc) or manually alters the location hash.

See demo

var authorApp = LearnosityAuthor.init(initOptions, {
    readyListener: function () {

        // Push app location changes to browser history.
        authorApp.on("navigate", function (event) {
            window.location.hash = "#" + event.data.location;
        });

        /**
         * Go to initial browser location. The window location hash includes
         * the # at the start, so we strip it with some basic regex.
         */
        authorApp.navigate(window.location.hash.replace(/^#/, ""));

        // Push changes to browser location hash to app.
        window.onhashchange = function () {
            authorApp.navigate(window.location.hash.replace(/^#/, ""));
        };

    }
});
Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity.