在页面中注入第 3 方 HTML（带有脚本）答案

【问题标题】：Inject 3rd party HTML (with scripts) in page在页面中注入第 3 方 HTML（带有脚本）
【发布时间】：2015-01-09 19:49:44
【问题描述】：

我正在使用来自合作伙伴的页眉/页脚 HTML 代码重新命名我的网站（以使网站的行为与重新命名一样）。

视觉上：

existing-website.com：

+---------------------+
|                     |
|       My site       |
|                     |
+---------------------+

wrapped-website.com：

+---------------------+
|     Brand Header    |
+---------------------+
|                     |
|       My site       |     variable page height
|                     |
+---------------------+
|     Brand Footer    |
+---------------------+

品牌页眉和页脚是带有内联 JS 的 HTML 代码块。还有另一个带有脚本和 CSS 的 HTML 块。它使用了一个 jQuery 版本，而他们的脚本的一部分实际上是自己崩溃的。

我做了什么：通过服务器端的普通页面注入他们的 HTML + 将我所有的脚本放在 <body> 的末尾

结构如下：

<head>
  [.. their head (CSS/JS) stuff as HTML ..]
  .. my CSS stuff ..
  [.. fixes for their CSS stuff ..]
</head>
<body>
  [.. their HTML header ..]
  .. my normal body ..
  [.. their HTML footer ..]
  .. my JS ..
</body>

因此，品牌网站和非品牌网站之间的唯一区别是品牌网站“打开”带有括号的行。

注意：

我将 CSS 修复放在 head 的末尾，以修复他们的 CSS 和我的 CSS 之间的冲突
我将我所有的 JS 放在最后，以便它覆盖他们 JS 内容中的其他可能行为。

在我看来它可以这样工作，但我想知道这是否是一个好/稳健的想法，特别是知道他们的代码 (HTML/CSS/JS) 可以更新。

我也在考虑对我的网站进行 iframe。不需要 CSS 修复，也没有 JS 问题！但是然后我希望 iframe 尽可能高（height 对应于页面的总高度，即使高度是动态变化的，请参见上面的架构）。我读到这真的很难实现。

有什么我可以改进的吗？
或者是否有可能正确实现我的网站的 iframe？
还是别的什么？

【问题讨论】：

您的站点是仅由静态文件组成，所有处理都在客户端处理，还是您还使用某种服务器端 servlet/jsp？
我不太喜欢 iframe 的想法，但我对其他选项也不感兴趣...
@ZacWolf 这是 Django 网站。我使用服务器端代码在我的“常规”页面中注入品牌 HTML 片段
好吧，我没有使用足够多的 phython 来了解可用的 html 解析器库，但是由于这个环境确实允许服务器端处理，那么您可以构建一个 python 脚本来检索和解析旧页面拉出页眉/页脚 html，然后将该内容注入到新的 html 文件中。任何时候任何人请求页面，您的代码都可以查看原始页面是否发生了变化，然后重建新页面，否则它只会提供新页面。

标签： javascript html iframe

【解决方案1】：

使用 css 让 iframe 保持容器的大小实际上非常容易。

iframe{
 position:absolute;
 top:0;
 left:0;
 bottom:0;
 right:0;
}

在您提到的 cmets 中，这是一个 Django 站点。我只是对那个环境或 Python 不够熟悉，但是在查看了他们的网站之后，它确实允许服务器端处理。您可以编写一个 python 脚本来检索和解析旧页面以提取页眉/页脚 html，然后将该内容注入到新的 html 文件中。您是否发现其他网站的内容发生了很大变化，需要同步到？

【讨论】：

我不明白你的 CSS：在我的浏览器中，这只是将 iframe 定位在左上角。我还尝试了包含 div 位置：相对，相同的故事。事实上，我可以做服务器端处理，我猜你在结尾段落中描述的实际上是我到现在为止所做的，正如我试图在问题中解释的那样。
我更新了我的问题以使事情更清楚并解释我已经做了什么
这个 CSS 基本上使 iFrame 扩展以填充其父级，因此如果 iFrame 是 BODY 的子级，它应该导致 iFrame 扩展以填充屏幕。如果它是 div 的子级，则该 div 需要具有 iFrame 可以扩展到的高度/宽度。但就像你说的那样，我认为这是你想要完成的事情的一次红色听证会。
您最好编写一个服务器端应用程序，该应用程序执行旧站点 html 的 url 拉取，解析它，然后用您自己的替换它们的内容标签。有很多方法可以做到这一点，如果父站点经常更改，那么您要么需要实时进行服务器查询（不是最好的主意），要么按某种时间表进行。