Question

我正在尝试提供维护包含大量页面的网站的最佳方法，并且我选择为“常见”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
不允许使用原点null

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

Answer 1

您无法通过AJAX请求在大多数浏览器中加载file：//网址，或者您将获得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。

Answer 2

你不需要服务器端语言

重播comment

中描述的错误消息

XMLHttpRequest无法加载file：///Users/Jon/Desktop/text.html。 Access-Control-Allow-Origin
不允许使用原点null

您需要本机Web服务器设置，并通过调用localhost或127.0.0.1

来运行它

好读

Jquery: Running AJAX locally without a webserver

将HTML代码段加载到DOM中

2 个答案: