Question

我将创建一个网站subdomain.example.com，该网站将存在于与example.com不同的环境中。这两个网站将采用相同的布局来创建无缝体验。但是，它们不会共享数据库或代码库。

我希望subdomain.example.com上的页眉和页脚与example.com上的页眉和页脚相同。 example.com上页眉和页脚中的信息会定期更改，因此我希望能够在subdomain.example.com上保持一致。我有什么选择？

修改： example.com是动态CMS，而不是静态HTML。我无法访问其任何代码或模板。

Answer 1

嗯，这仍然有点模糊，如果您不是example.com网站所有者，我会担心在使用普通AJAX时出现CORS错误。这就是fjellfly上面提到的（XSS）或者＃34;跨站点脚本。＆＃34;所以，你有几个选择。一种是运行像PhantomJS或CasperJS这样的后端Javascript。

如果您能够使用jQuery AJAX，它将同样简单：

$( "#navIdInYourSubdomain" ).load("http://example.com #navToCloneFrom"
);  
//That should either execute and load their nav element into your page 
//Or it will fail and do nothing, you could add an alert on failure

链接此处（http://api.jquery.com/load/）

如果此方法失败，那么您可以使用后端JS框架，如phantomJS + casperJS（最简单）或NodeJS + cheerio（NodeJS的jQuery功能）或PhantomJS本身。但是，这需要后端运行。像PhantomJS和Casper这样的无头浏览器引擎的好处是，只要你有能力，它们就会令人惊叹。

我将使用的最后一种方法是＆＃34; Kimono＆＃34; （https://www.kimonolabs.com/）您可以在其中创建API以从任何网站/ webapp中进行调用。关于Kimono的好处是它们的安排，以及它们为几个重要框架提供的预制脚本。一旦你创建了一个API，就可以使用和服从目标网站的API scrape中构建你的导航。它花了一天时间才弄明白，然后成为有史以来最有用的工具之一。

如果您遇到与XSS或CORS无关的jQuery问题，需要考虑的一件事是，某些CMS要求在加载后将jQuery符号传递到页面中：（https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/）

Answer 2

您应该使用iframe作为页眉/页脚。像

这样的东西

<iframe src="example.com/path/to/header.html">

Answer 3

如果您可以使用php，那么file_get_contents（http://php.net/manual/en/function.file-get-contents.php）将是一个选项。您可以使用正则表达式过滤相关部分 - 或者更改基本网站提供内容的方式。

另一种解决方案可能是使用ajax请求。在这种情况下，您还将开发一个基础网站如何处理请求的解决方案。但是我不确定这样的ajax请求是否会以安全警告（XSS）结束，或者它是否被允许，因为它是相同的顶级域名。

从外部网站加载页眉和页脚到我的网站

3 个答案: