Jeg sidder fast, og håber at nogen her kan hjælpe mig. Jeg bruger AJAX og HTML5's history.pushstate med et (ikke helt færdigt) fallback til IE9 og ældre til at loade indhold fra eksterne sider på index-siden.
Selve den del der loader er lavet med Jquery og frem- og tilbage-knapperne virker ved test i HTML5-kompatible browsere.
Men jeg har store problemer med at lave en url der kan bruges til bookmark og page refresh (F5). Jeg går ud fra, jeg mangler en eller anden form for url-rewrite enten via fx noget php og .htaccess eller måske det kan fixes vha JS / Jquery?
Problemerne ifht fallback'en til ældre browsere er pt mindre vigtigt.
Jeg er absolut IKKE nogen haj til at kode - layout er nok det jeg ved mest om, så har du et hjælpende svar, må du bære over med mig, hvis tingene bliver alt tekniske.
Udover index.html som indeholder koden jeg poster herunder, har mit eksempel 2 sider - page1.html og page2.html - hvis indhold loades på index.html i div'en #content.
Her er scriptet
- $(document).ready(function(){
-
- if (typeof(window.history.pushState) == 'function') {
-
- // AJAX-LOADING
- $('a').click(function() {
- var page = $(this).attr('href');
-
- history.pushState({ path: (page + ".html")}, '', page); // ("/") - url for absolute links in subfolders where?
- $("#content").load(page + ".html");
- return false;
- });
-
- // BACKBUTTON
- $(window).bind('popstate', function(event) {
- var state = event.originalEvent.state;
- if (state) {
- $("#content").load(state.path);
- }
- });
-
- // FALLBACK IE9
- } else {
- $('a').click(function() {
- var page = $(this).attr('href');
-
- window.location.hash = page + ".html";
- $("#content").load(page + ".html");
- return false;
- });
-
- } // END of if.. and else..
-
- }); // END DOC READY
Dette er index.html
- <div id="main">
- <h1>this is index.html</h1>
-
- <ul>
- <li><a href="page1">Load page 1</a></li>
- <li><a href="page2">Load page 2</a></li>
- </ul>
-
- <div id="content">
- <p>Load here.....</p><br />
- </div>
- </div> <!-- end of main -->