Pages

Intégrer du HTML dans une page 


Source HTML



<body>
 <section data-html="welcome.html"></section>

...



</body>




Source welcome.html



<h2>Welcome!</h2>




<h3> my name is Denis </h2>



code JS


(function () {
    var queryHtml = function () {
        var sections = document.querySelectorAll('[data-html]'),
            section, j, jlen;

        for (j = 0, jlen = sections.length; j < jlen; j++) {
            section = sections[j];

            if (section.dataset.html) {

                var xhr = new XMLHttpRequest(),
                    url = section.dataset.html,
                    cb = function () {
                        if (xhr.readyState === 4) {
                            if (
                                (xhr.status >= 200 && xhr.status < 300) ||
                                xhr.status === 0
                                ) {
                                section.innerHTML = xhr.responseText;
                            } else {
                                section.outerHTML = '


ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status + '. Check your browser\'s JavaScript console for more details.
';
                            }
                        }
                    };

                xhr.onreadystatechange = cb;

                xhr.open('GET', url, false);
                try {
                    xhr.send();
                } catch (e) {
                    alert('Failed to get file' + url + '.' + e);
                }
            }
        }
    };

    queryHtml();
})();



Exemple : 
http://gdichicago.com/classes/js205/slideshow/#/
Libellés : ,