Question

我的目标：将一个html文件（我网站的标题）包含在许多其他html文件中（我网站的每一页）。

我不想将我的标题html复制并粘贴到我的每个网站页面中。当我想更改标题html时，我不想浏览每个网页并更改所有标题。

我目前的（不工作）解决方案：使用jquery的.load（）函数将我的标题html加载到div中。我的代码：

header.html中：

<h1>I am a header</h1>

的index.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>

这与像this one这样的问题非常相似，但我的代码仍然不起作用。这可能与django的模板引擎所呈现的事实有关吗？ header.html与index.html在同一目录中

Answer 1

我延伸丹尼尔已经说过的话。

首先阅读django documentation

假设您有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 个答案: