简体   繁体   English

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

[英]jquery .load() to include an html file into another not working

My goal: Include one html file (the header of my website) into many other html files (each page of my website).我的目标:将一个 html 文件(我网站的标题)包含到许多其他 html 文件(我网站的每一页)中。

I do not want to copy and paste my header html into each of my websites pages.我不想将我的标题 html 复制并粘贴到我的每个网站页面中。 When I want to change my header html, I do not want to have to go through each webpage and change all the headers.当我想更改标题 html 时,我不想浏览每个网页并更改所有标题。

My current (not working) solution: Use jquery's .load() function to load my header html into a div.我当前(不工作)的解决方案:使用 jquery 的 .load() 函数将我的标题 html 加载到 div 中。 My code:我的代码:

header.html:头文件.html:

<h1>I am a header</h1>

index.html:索引.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 is very similar to so questions like this one , yet my code still does not work.这是非常相似,所以这样的问题这一个,但我的代码仍然不能正常工作。 Could it have something to do with the fact that this is all being rendered by django's templating engine?这可能与这一切都由 django 的模板引擎渲染的事实有关吗? header.html is in the same directory as index.html header.html 与 index.html 位于同一目录中

I extend what Daniel already said.我扩展了丹尼尔已经说过的内容。

first read the django documentation首先阅读django文档

say you have base.html where you store the header part which should appear in all pages, and you have detail.html which needs to handle some other parts假设您有base.html用于存储应该出现在所有页面中的标题部分,并且您有detail.html需要处理其他一些部分

so, base.html :所以, base.html

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

and your detail.html would look like:你的detail.html看起来像:

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

thats it, your detail.html will have everything base.html has plus the things you write into body block.就是这样,您的 detail.html 将包含 base.html 的所有内容以及您写入body块的内容。

hope, this helps希望这可以帮助

Your Code should be working, but if it is in Chrome, it might have some problem with file access.您的代码应该可以正常工作,但如果它在 Chrome 中,则文件访问可能存在一些问题。

You can try using firefox, or stick on Chrome but open it with arguments --args --allow-file-access-from-files.您可以尝试使用 firefox,或坚持使用 Chrome,但使用参数 --args --allow-file-access-from-files 打开它。

If this still not working, pls append on the console output so it's more easy to diagnose.如果这仍然不起作用,请附加在控制台输出上,以便更容易诊断。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM