Auteur Topic: Dynamisch laden van pagina. Popstate  (gelezen 2948 keer)

0 leden en 1 gast bekijken dit topic.

xvilo

  • Global Moderator
  • Verslaafd DigitalPlace Lid
  • *****
  • Berichten: 2675
  • Karma: -44
    • Bekijk profiel
    • http://www.xvilo.com
Dynamisch laden van pagina. Popstate
« Gepost op: juli 30, 2016, 12:11:56 pm »
  • [+1]0
  • [-1]0
  • Hallo,

    Op dit moment heb ik een klein scriptje gemaakt die het mogelijk moet maken om een internet pagina dynamisch te laten navigeren.
    In principe werkt het nu redelijk. Als iemand op de juiste link klikt word er een ajax request gedaan naar de pagina, haalt de html op en replaced deze in #datacontainer.
    Daar bij word ook de URL mee veranderd zodat als iemand hem zou kopiƫren plakken hij gelijk bij de juiste pagina uit komt.

    Maar het probleem wat je nu krijgt is dat als iemand de back en forward knoppen in de browser gebruikt er eigenlijk niks gebeurt omdat we niet een pagina zijn opgeschoven.
    Dit is te ondervangen met window.onpopstate. Vervolgens naar de URL te kijken en dan weer de nieuwe/oude content in te laden.

    Het probleem waar ik nu tegen aanloop is dat de popstate maar 1 keer werkt en daarna niet meer verder terug gaat. Weet iemand wat ik hier vergeet/mis doe? Het is getest in Safari 10 en Chrome 54 (Alle bij op MacOS 10.12).

    Mijn javascript code:
    if(Modernizr.history){
    var links = document.getElementsByClassName("ajax-load")

    Array.prototype.forEach.call(links, (el)=>{ el.addEventListener('click', function(e){e.preventDefault(); loadContent(this.href);})});

    function loadContent(hrefs){
    _link = hrefs;
    history.pushState(null, null, _link);
    getContent(_link);
    return false;
    };

    function getContent(link){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', link+"#datacontainer");
    xhr.send(null);
    xhr.onreadystatechange = ()=>{
    var DONE = 4; // readyState 4 means the request is done.
    var OK = 200; // status 200 is a successful return.

    if (xhr.readyState === DONE) {
        if (xhr.status === OK){
        //xhr.responseText
    console.log("Request was O.K. 🎉")
    var parser      = new DOMParser ();
    var responseDoc = parser.parseFromString (xhr.responseText, "text/html");
    document.getElementById('datacontainer').innerHTML = parser.parseFromString (xhr.responseText, "text/html").getElementById('datacontainer').innerHTML;
        } else {
        console.log('Error 😭: ' + xhr.status); // An error occurred during the request.
        }
    }
        };
    }

    window.onpopstate =  function() {
    _link = window.location.href;
    console.log('popstate: '+ _link);
    loadContent(_link);
    }
    }

    Onderaan is de
    window.onpopstate
    die dan vervolgens opnieuw de laadContent() functie uitvoert...