8

The best example of what I'm trying to do is YouTube's navigation system. If you click on a link to a video a red bar at the top of the page appears indicating how much of the requested page has loaded. When the requested page is finished loading it instantly replaces the contents of the previous page and the video starts to load. Several things are happening to make this as seamless as possible.

  • The URL is modified to match the new page.
  • No redirect(This is hard to explain).
  • The new page is added to the History.
  • Back and Forth navigation works seamlessly.

I modified the URL with:

window.history.pushState("object or string", "Title", "/new-url");

I attempted to load the requested page with:

$.("html").load("newPage.php", function(){});

This would replace the entire previous page's code with the new pages code. Several issues with this:

  • Back and forth navigation works with the URL, but an event handler must detect this and load the proper page. I used this: 

    $(window).on('popstate', function() {
    $('html').load("../"+window.location.pathname, {page:"account"});
});
  • Using $.load() can't(shouldn't) load any new scripts tags script tags because Synchronous XMLHttpRequest on the main thread is deprecated

What I'd like to be able to do:

  • Seamlessly load a page without a redirect using JQuery and AJAX
  • Have that new page be able to have new script and PHP tags(PHP might be impossible, and I might have to use AJAX to replicate this).

Sources:

Updating address bar with new URL without hash or reloading the page

Load HTML page dynamically into div with jQuery

JS or Jquery browser back button click detector

Synchronous XMLHttpRequest on the main thread is deprecated

Community
  • 1
  • 1
Damen
  • 101
  • 4
  • Welcome to SO - what have you tried? We are happy to help but can't write the code for you – StudioTime Jan 04 '16 at 11:02
  • I have shown what I have tried in the coded sections, but the methods used are deprecated and rather sloppy. I'm looking for a library of sorts that could do all the hard work for me. You can see my sources and why they won't work at the bottom. – Damen Jan 04 '16 at 11:09
  • 1
    This may be off-topic for you, since you are specific in your tags, but wouldn't a front-end MVC framework like AngularJS solve a lot of your problems? (might have to ditch PHP for views). – Drumbeg Jan 04 '16 at 11:17
  • I am open to AngularJS as long as I don't have to get rid of PHP. I really like AJAX in JQuery though, and would prefer to do it through that. – Damen Jan 04 '16 at 11:21
  • Youtube's progress bar doesn't track the bytes downloaded - it's just a CSS animation which transitions to a point off-centre, then on load of the AJAX request it completes the animation. As for swapping out content, you don't need to dump everything in the `` tag - just bootstrap your page with all required libs then create a pseudo "body" element / container for placing dynamically loaded content. You've already got the solution to the actual redirect problem with `history.pushState`. – Emissary Jan 04 '16 at 11:33
  • Each of my pages are likely going to require a whole different set of coding. Other than JQuery and some stuff to manage navigation everything will be pretty custom. As for history.pushState, that only changes the URL, not the content. I think I have a good idea of what I have to do, but I need to figure out security. – Damen Jan 04 '16 at 14:04
  • Further to @Emissary comment about progress bars. I've used http://ricostacruz.com/nprogress/, which is very YouTube like. – Drumbeg Jan 04 '16 at 14:17

2 Answers2

2

This following post might help you.

Curious about the new way YouTube is loading pages

You can check if a js library called history.js can help you achieve what you need.

Community
  • 1
  • 1
kaygee
  • 23
  • 4
0

The history.js library does all the hard work of dealing with history and I just have to worry about the navigation, which was easy. All I need to do is have all the scripts loaded on the initial load of the page(when the user first comes to the site). Then when they are "redirected" the page body is replaced with the correct page using $("body").load("pageToBeLoaded.php",pageToBeLoaded()). The pageToBeLoaded() function is called on completion, and it handles all the fun stuff for the new page.

Damen
  • 101
  • 4