Deep web links for Single-Pages an Single-Site webpages

Ajax deep links

New end-state-urls like redirecte urls with Ajax applications


Create deep linking for Ajax created web pages

If you use Ajax interaction for a web page, the url is not updated automaticaly when you click a ajax link or load content. The surface link, the url which you called the page, is every time the same also you have changed the content with Ajax. The idea is to build deep links every time you changed and updat the page content with Ajax. [1]

HTML

Build a link, use a div element with a data-* attribut or use a common anchor element.

Build a Ajax link with a div and a data-* href attribute.


<div data-href="example.html">Example</div>

AJAX links

With the history.pushState(history entry, title, URL) you update the browser address bar.

Update Url/location.


$( "#target" ).click(function() {
    var url = $( this ).data( "href" );
    jqxhr();
    history.pushState('', '', url );
});

var jqxhr = function(url){
    // do jqxhr
    $( "<div>" ).load( url + " jQSelector", function () {
        ...
        $( this ).find( selector ).addClass( "show" );
        ...
    });
};

Browser/mouse forward- and backward buttons

If you clicked the browser forward- or backward buttons, the surface link in the browser address bar will be updated and the event window.onpopstate is fired. Build an event listener function for cache this event.

Event listener for the Url/location change (browser- or mouse forward-/ backward buttons).


window.onpopstate = function(event) {
    if (window.history.state == null){ // page was loaded
        return;
    }
    var url = document.location.href.split('/');
    url = url[url.length - 1].split('.')[0];

    jqxhr( url );
};

Live: physiomobil-ka.de

The code is used here: github.com/DanielFloeter/jQPrefetch



[1] Example which updates the Url when using Ajax for load, caching and change page content: https://github.com/DanielFloeter/jQPrefetch


© Kometschuh.de | Impressum | GitHub | Facebook |