将 HTML 片段加载到 DOM 中答案

【问题标题】：Load HTML Snippets into DOM将 HTML 片段加载到 DOM 中
【发布时间】：2013-05-15 03:28:36
【问题描述】：

我正在努力想出维护一个包含大量页面的网站的最佳方法，并且我选择为“常见”HTML 元素（如页眉和页脚）创建单独的 HTML 文件。

目前，我的index.html页面是这样设置的，jQuery函数应该将text.html的内容注入到页脚div中。

<html>
<head>
<title>Test Site</title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
      $("#footer").load("text.html");
    });
</script>
</head>
<body>
    <div id="footer"></div>
</body>
</html>

text.html的内容是：

<div style="red">
    Hello, world!
</div>

这似乎不起作用，我收到以下错误

XMLHttpRequest 无法加载 file:///Users/Jon/Desktop/text.html。 Access-Control-Allow-Origin 不允许 Origin null

问题：这可以通过 jQuery 实现，还是我必须使用 PHP/其他东西？我知道 Wordpress 做类似的事情，但我很确定他们使用 PHP。如果我能让它发挥作用，这种方法将非常可持续。

【问题讨论】：

不需要像 PHP 这样的服务器端语言来做到这一点。控制台有错误吗？
您遇到了什么错误？试试$("#footer").load("text.html", function(response, status, xhr) { if (status == "error") { var msg = "Sorry but there was an error: "; $("#error").html(msg + xhr.status + " " + xhr.statusText); }
XMLHttpRequest 无法加载文件：///Users/Jon/Desktop/text.html。 Access-Control-Allow-Origin 不允许 Origin null。
使用此错误消息更新您的问题。 :)

标签： jquery html

【解决方案1】：

在大多数浏览器中，您无法通过 AJAX 请求加载 file:// URL，否则您将收到 Origin null is not allowed by Access-Control-Allow-Origin. 我相信 Firefox 会允许，但 Chrome/Safari 不会。（更多信息请参见Google Chrome --allow-file-access-from-files disabled for Chrome Beta 8）

最简单的方法是运行本地网络服务器，这样就不会出现该错误。

此外，就您所做的而言，有比 jQuery 更好的库来执行此操作。我正在使用https://github.com/linkedin/dustjs/wiki/Reusable-UI-Dust-modules - 类似于How to define mustache partials in HTML? - 两者都有其他文件的部分/包含。你也可以看看http://pagerjs.com/

另一个值得一试的项目是http://docpad.org/ - 它还将为您安装一个网络服务器。完成网站工作后，您可以从所有部分生成静态 HTML。

【讨论】：

【解决方案2】：

你不需要服务器端语言

重播comment中描述的错误消息

XMLHttpRequest 无法加载 file:///Users/Jon/Desktop/text.html。 Access-Control-Allow-Origin 不允许 Origin null

您需要一个本机 Web 服务器设置，并通过调用 localhost 或 127.0.0.1 来运行它

好读

Jquery: Running AJAX locally without a webserver

【讨论】：