使用 HTML 和 JS 将 HTML 从一个文件导入另一个文件？

Question

I have tried a few different solutions both on here and from various sources around the web but nothing seems to work. iframes seem to grab the test pdf file i have and use it instead of the html (i plan on using the iframe pdf viewer)

jQuery and js script tags seem to have no effect

I'm using freshly installed Firefox so js is enabled.

The way im testing is by opening the html file so do i need to open the web page some other way?

I'm just looking to have my title and navbar on all my pages while only having to update one file. if anyone has any other solutions i would love to try them.

Thanks in advance.

Answer 1

Try the solution i found: https://github.com/louisho5/jQuery-Include-HTML-File-Plugin This will let you include another html page inside your current html page using jquery.

You can also accomplish what you're trying to achieve using php include, but requires your app to run on a web server:

Add the this tag inside the body of your page <?php include 'navigation.php';?>

See: https://www.w3schools.com/php/php_includes.asp

Answer 2

My solution so far is:

function renderImportContent() {
    //get template element and clone to clon
    var templateList = document.body.querySelectorAll("div[import]");
    //run throught the list and replace elements with templates
    for (var i = 0; i < templateList.length; i++) {
        //console.log(templateList[i].innerHTML);
        templateList[i].outerHTML = fetchTemplate(templateList[i].getAttribute("import"))
    }
}

function fetchTemplate(path) {
    console.log('/html/template/'.concat(path));
    fetch('/html/template/'.concat(path)).then((response) =>{ return response.text();}).then((html) => { document.body.innerHTML = html}).catch((error) => {console.log("fetch error:", err)});
}

With the only issue seeming to be that it removes more than it should. Instead of replacing the inside of the div tag it replaces the entire body.

I've tried using textContent as well but that also didn't work.