jquery .load() 將一個 html 文件包含到另一個不工作的文件中

Question

我的目標：將一個 html 文件（我網站的標題）包含到許多其他 html 文件（我網站的每一頁）中。

我不想將我的標題 html 復制並粘貼到我的每個網站頁面中。 當我想更改標題 html 時，我不想瀏覽每個網頁並更改所有標題。

我當前（不工作）的解決方案：使用 jquery 的 .load() 函數將我的標題 html 加載到 div 中。 我的代碼：

頭文件.html：

<h1>I am a header</h1>

索引.html：

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script> 
            $(function(){
                $("#header").load("header.html"); 
            });
        </script> 
    </head>
    <body>
        <div id="header"></div>
    </body>
</html>

這是非常相似，所以這樣的問題這一個，但我的代碼仍然不能正常工作。 這可能與這一切都由 django 的模板引擎渲染的事實有關嗎？ header.html 與 index.html 位於同一目錄中

Answer 1

我擴展了丹尼爾已經說過的內容。

首先閱讀django文檔

假設您有base.html用於存儲應該出現在所有頁面中的標題部分，並且您有detail.html需要處理其他一些部分

所以， base.html ：

<!doctype html>
<html lang="en">
    <head>
       stuff that appears in all pages
    </head>
    <body>
       {% block body %}{% endblock %}
    </body>
</html>

你的detail.html看起來像：

{% extends 'base.html' %}
{% block body %}
   stuff that shows up only in detail.html
{% endblock %}

就是這樣，您的 detail.html 將包含 base.html 的所有內容以及您寫入body塊的內容。

希望這可以幫助

Answer 2

您的代碼應該可以正常工作，但如果它在 Chrome 中，則文件訪問可能存在一些問題。

您可以嘗試使用 firefox，或堅持使用 Chrome，但使用參數 --args --allow-file-access-from-files 打開它。

如果這仍然不起作用，請附加在控制台輸出上，以便更容易診斷。

jquery .load() 將一個 html 文件包含到另一個不工作的文件中

問題描述

2 個解決方案

解決方案1
3 已采納 2015-06-30 19:17:00

解決方案2
0 2015-06-30 19:15:25

jquery .load() 將一個 html 文件包含到另一個不工作的文件中

問題描述

2 個解決方案

解決方案1 3 已采納 2015-06-30 19:17:00

解決方案2 0 2015-06-30 19:15:25

解決方案1
3 已采納 2015-06-30 19:17:00

解決方案2
0 2015-06-30 19:15:25