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