Question

对不起，如果这是一个愚蠢的问题，但是其他时间没有其他解决方案对我有帮助。

我试图将一个单独的HTML文件的内容显示为可在多个页面上显示的div，因此在进行更改时，我不必费力地重复复制和粘贴它。 / p>

我在Chrome浏览器中本地托管，并使用Brackets编辑器。

这里是一个示例，基本上总结了我要做的事情-

index.html

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

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

    </body>
</html>

这是我想在#content div中显示的内容：

content.html

<!DOCTYPE html>
<html>

    <head>
    </head>

    <body>

        <p>Hello!</p>

    </body>
</html>

如果您在本地托管，我发现有关.load()的信息不起作用，这是问题所在吗？ :(我该如何解决？我是编码新手。

Answer 1

有很多方法可以插入内容，从最好的开始。

html导入标签

Treehouse aricle 它有很多好处，例如ist short af，但是会出现诸如：在浏览器之间的兼容性更差的问题。

jquery方法

如官方文档所述，存在方法.load()，尽管它具有完成处理程序

$("#content").load("path/to/local/file.html", function (){
console.log("success");
});

手动ajax

仅当您知道您的电话是什么，或者您的项目没有时间限制，而您想知道正在进行的事情时，才这样做

有很多方面说明了如何执行此方法，但是许多人认为这很重要，并且许多人构建了一些东西以便于访问，因此，如果您是编码新手，那将不适合您的问题

还有更多疯狂的对象操作和复杂的脚本。如果您知道只有您自己或愿意启用实验性设置的人会使用它，我会推荐第一个。

任何其他应该导致快速响应并发布的项目都尝试使用jquery。尝试使用调试器进行探索尝试检查控制台输出。

如果您发现里面有什么东西或意外行为，请张贴并尽力帮助您

使用括号将外部HTML文件加载到div中

1 个答案: