AJAX deeplinking with jQuery Address
I have a website which has many pages:
开发者_如何学PythonFor example:
HOME:
http://mywebsite.com/index.html
SOME PAGE:
http://mywebsite.com/categorie/somepage.html
I decided to make my pages load dynamically with AJAX without reloading the page. So I decided to use jQuery Address plugin ( http://www.asual.com/jquery/address/docs/ ) in order to allow deeplinking and Back-Forward navigation:
<script type="text/javascript" src="uploads/scripts/jquery.address-1.2rc.min.js"></script>
<script type="text/javascript">
$('a').address(function() {
return $(this).attr('href').replace(/^#/, '');
});
</script>
Now, after installing the plugin, if I go on http://mywebsite.com/index.html
(HOME) and click on SOME PAGE link, jquery successfully loads the http://mywebsite.com/categorie/somepage.html
without reloading the page and the address bar on my browser displays:
http://mywebsite.com/index.html/#/categorie/somepage.html
which is great!
However, the problem is: if I copy this dynamically generated URL: http://mywebsite.com/index.html/#/categorie/somepage.html
into a web browser address bar, it will take into my website index.html page and not to the "SOME PAGE" page. Also, The Forward/Back buttons don't work correctly, they only replace the address in the URL bar but the content stays the same.
I suppose that I need to write some JavaScript rule that associates the dynamic URL with the correct page?
Some help would be appreciated. Thanks :)
copy paste url to address bar is working back/next button also working.
the # should be there to make it work
anyone know how to make #! so its indexable by google?
or #/ is the same thing?
basically this work for me on wordpress:
// ajax setup
$.ajaxSetup({cache:false, success: function() {
// optional action here
}});
// Event handlers
$.address.init(function(event) {
$('#nav li a').address(function() {
return $(this).attr('href').replace(location.pathname, '');
});
}).bind('externalChange', {}, function(event) {
var post_id; // get page id
var nav_id; // get nav class
// for back button
switch (true) {
case (event.value == undefined):
post_id = 2; nav_id = 'home'; break;
case (event.value == "/about"):
post_id = 19; nav_id = 'about'; break;
case (event.value == "/product"):
post_id = 26; nav_id = 'product'; break;
...etc....
default: post_id = 2; nav_id = 'home';
}
// content loader on back/next button
$("#content-wrap").load("http://www.somesite.com/home/",{id:post_id}); // load content
});
// content loader by #nav
$(document).on("click","#nav li a",function(e){
var post_id = $(this).attr("id"); // get page id
$("#content-wrap").load("http://www.somesite.com/home/",{id:post_id}); // load content
return false; // keep url, no refresh
});
Something like this:
$(function () {
var path = location.hash.substring(1); // remove '#'
if (path) {
$.address.value(path);
}
});
Update:
If you're loading pages manually (e.g. on link click) instead of using an address event handler (e.g. $.address.change(function () { ... })
), then replace the $.address.value(path);
above with an Ajax call for the page at path
:
$(function () {
var path = location.hash.substring(1); // remove '#'
if (path) {
// get page at path
}
});
You can make it indexable by Google (#!) by adding: $.address.crawlable(true); Here is a link I found helpful for jQuery Address methods: http://www.asual.com/jquery/address/docs/
精彩评论