WillemvanderVeen WillemvanderVeen - 3 years ago 164
HTML Question

Maintain a html header using JS/JQuery

Working on a website, want to use the same header on each page.
I am first trying it out by loading the files from my files system into the browser however this gives a problem with the following code (got it in this link):


<script src="//code.jquery.com/jquery-1.10.2.js"></script>


<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>

This doesn't seem to work, I read in the comments that this doesn't work anymore because of safety reasons.


Is there another way to solve this problem using Javascript/JQuery?

Answer Source

function getUrl(url) {
    return new Promise((resolve) => {
        let XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
        let xhr = new XHR();

        xhr.open('GET', url, true);

        xhr.onload = function() {


let header = document.querySelector('#header');
let footer = document.querySelector('#footer');

        resolve => header.innerHTML = resolve
        resolve => footer.innerHTML = resolve

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download