使用 HTML 和 JS 將 HTML 從一個文件導入另一個文件？

Question

我在這里和 web 周圍的各種來源都嘗試了一些不同的解決方案，但似乎沒有任何效果。 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和js腳本標簽好像沒有效果

我正在使用新安裝的 Firefox 所以啟用了 js。

即時測試的方式是打開 html 文件，所以我需要以其他方式打開 web 頁面嗎？

我只是想在我的所有頁面上都有我的標題和導航欄，而只需要更新一個文件。 如果有人有任何其他解決方案，我很想嘗試一下。

提前致謝。

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.

您還可以使用 php 包括來完成您想要實現的目標，但需要您的應用程序在 web 服務器上運行：

在頁面正文中添加這個標簽<?php include 'navigation.php';?>

見： https://www.w3schools.com/php/php_includes.asp

Answer 2

到目前為止，我的解決方案是：

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)});
}

唯一的問題似乎是它刪除的內容超出了應有的范圍。 它不會替換 div 標簽的內部，而是替換整個正文。

我也嘗試過使用 textContent ，但這也沒有用。