如何在當前 html 代碼中使用外部 html 文件

Question

我正在嘗試將外部 HTML 頁面（通用導航）加載到我當前的 HTML 頁面中。 我嘗試了加載功能，但它已被棄用。 你能告訴我另一種包含它的方法嗎？ 我沒有使用任何服務器。

這是我的代碼

<!DOCTYPE html>
<html>

<head>
  <script src="ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#content').load(" nav.html ");
    });
  </script>
</head>

<body>
  <div id="content "></div>
</body>

</html>

Answer 1

嘗試這個

<script>
    function loadPage(href) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", href, false);
        xmlhttp.send();
        return xmlhttp.responseText;
    };

    document.getElementById('content').innerHTML =
        loadPage('your_html_file.html');
</script>


<div id="content">

</div>

Answer 2

您應該使用SSI 功能。

有幾種方法，但這可以解決您的問題。

<!--#include virtual="PathToYourFile/YourFile.html" -->

這可以插入到<div>以在 CSS 中進一步設置樣式。

記住！ 由於 html-doctypes 的一些限制，您不能將.html文件插入到.html文件中。 您必須使用另一種格式作為.shtml ，您可以在其中包含.html文件。 您可以將.html包含到.shtml文件中。 這也是.shtml最初創建的目的。 這是因為它是XHTML（動態 XML HTML）的一部分...

更改文件

您對 HTML 的方法是正確的，也是您的 JS。 我在那里包含了很多包含文本的 html 文件。

我的方法是，當加載頁面時，將在<div>加載一些帶有文本。 下面 JS 用於更改<div>的內容。 正如 Daniel Beck 所說：“...至少在 Apache 中，服務器需要配置為檢查特定的文件擴展名...”。 您在 .htaccess 文件中配置您的文件。 但只有在你知道自己在做什么的情況下才這樣做。

某些（較新的？）服務器具有默認設置，如果您希望能夠包含 .html 文件，則無需更改 .htaccess 文件。 至少您可以將 .html 文件包含到 .shtml 文件中。

我已經包含了一個Mimetype轉換器，它告訴瀏覽器它應該如何讀取文件。 對於 txt/html，我告訴腳本它應該使用字符編碼ISO-8859-1。 也可以使用其他的 UTF-8。 這取決於您和您的接收者的母語。

考慮使用e.preventDefault(); . 有了這個，我告訴瀏覽器不要將其視為導航鏈接，因此只會加載<div>的內容。

$(function() {
  $('#ButtonsID').click(function(e) {
    $('.DivClass').load('PathToFile/File.shtml');
    e.preventDefault();
  });

});

$.ajaxSetup({
  'beforeSend': function(xhr) {
    xhr.overrideMimeType('text/html; charset=ISO-8859-1');
  }
});

Answer 3

將兩個文件頁面放在同一目錄中，然后您可以使用鏈接上的簡單按鈕來使用外部文件。 例如

<button><a href="nav.html"> External file </a></button>

按鈕是您的選擇，它只是理解您可以簡單使用 html 鏈接的示例。

如何在當前 html 代碼中使用外部 html 文件

問題描述

3 個解決方案

解決方案1
1 2018-09-06 12:19:28

解決方案2
0 2018-09-06 12:04:16

解決方案3
0 2018-09-06 12:14:28

如何在當前 html 代碼中使用外部 html 文件

問題描述

3 個解決方案

解決方案1 1 2018-09-06 12:19:28

解決方案2 0 2018-09-06 12:04:16

解決方案3 0 2018-09-06 12:14:28

解決方案1
1 2018-09-06 12:19:28

解決方案2
0 2018-09-06 12:04:16

解決方案3
0 2018-09-06 12:14:28