⬆️ ⬇️

Anchor navigation on jQuery (graceful degradation)

Recently I came across an interesting plugin for jQuery: BBQ - Back Button & Query Library .



And I decided on its basis to make my own plugin for navigation based on anchors. The tasks that I set myself:

  1. normal links work in javascript disabled (read - normal indexing of pages by search engines)
  2. support for ordinary anchor links without any additional requests
  3. support for displaying loaded content in different areas of the page


The result can be seen here . And you can read a little more.



UPD: Ladies and gentlemen, some complain about the inaccessibility of the page (403 Forbidden), however, I do not see anything like that. In the comments gave a link to the working version, which you can try if my link did not work for you: http://vbolshov.org.ru.nyud.net/anchornav/ .

')





The idea was as follows: to make a plugin that would turn the links selected via the selector into “anchor” links, so that in the options you could specify the target element where the content should be displayed.



As a result, a plugin appeared, which can be used as follows:

$( 'a.anchornav' ).anchornav({

// -

target: '#content' ,



// CSS-class, ,

loading_class: 'loading' ,



// , ,

loading_text: 'loading...' ,



// CSS-class, ,

active_class: 'anchornav-active' ,



// . -, #<namespace>:<URL>

namespace : 'a' ,



// ( - ).

// ,

// back forward, ( ) -

// .

// , , .

handle_empty_anchor: true

});




* This source code was highlighted with Source Code Highlighter .




Result: all links have normal URLs, which are indexed by search engines, but load the content in the right place on the page. In this case, the content may contain scripts that, say, will change the title of the page.



Support for such things will also require some kind of manipulation on the server. It is necessary to check whether the request is an AJAX request and, depending on this, issue either a full HTML page or just a piece of it. Thus, users with javascript disabled will also be able to surf the site without any problems.



In PHP, this check can be done like this:

$ xmlHttpRequest = filter_input (INPUT_SERVER, 'HTTP_X_REQUESTED_WITH', FILTER_SANITIZE_STRING);




Well, as if everything seems to be. Comments and suggestions are welcome.

Source: https://habr.com/ru/post/82906/



All Articles