javascript - Creating deep links with History_API -
i trying pull deep linking. have found 1 tutorial , tried implement it. here history_api jquery/ajax loader:
$('.hor_menu').click(function() { var url = $(this).attr('href'); $.ajax({ url: url + '?ajax=1', success: function(data) { $('#destination').html(data); } });
so if div
-button .hor_menu
class clicked, ajax loads it's contents #destination
block.
link changed with:
if (url != window.location) { window.history.pushstate(null, null, url); } return false; });
to make back/forward buttons activated use:
$(window).bind('popstate', function() { $.ajax({ url: location.pathname + '?ajax=1', success: function(data) { $('#destination').html(data); } }); });
sample div
button:
<div class="hor_menu" id="b5" href="/pages/about.htm" onclick=" ('main_hor_menu')"><strong>about us</strong></div>
the whole thing works fine: changes links, loads requests destination. when click back/forward browser reloads content should. issue didn't achieve deep links: in state, pressing f5 reloads requested page, not it's contents #destination
block. and, obviously, can not make direct link page. please, tell me have missed or did wrong.
this kind of statefull client side apps hard without router component such backbone's or ember's. recommend finding 1 , use instead of building own router.
also, make sure server router maps pages/**
(or whatever relevant) html file
Comments
Post a Comment