Fatal编程技术网
  • javascript/
  • Javascript 在页面中插入第三方HTML（带有脚本）

Javascript 在页面中插入第三方HTML（带有脚本）

javascript html iframe

Javascript 在页面中插入第三方HTML（带有脚本）,javascript,html,iframe,Javascript,Html,Iframe,我正在用合作伙伴提供的页眉/页脚HTML代码重新命名我的网站（使网站表现得像重新命名一样） 视觉上： 现有网站： +---------------------+ | | | My site | | | +---------------------+ +---------------------+ | Brand Header | +---------------------+

我正在用合作伙伴提供的页眉/页脚HTML代码重新命名我的网站（使网站表现得像重新命名一样）

视觉上：

现有网站：

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

+---------------------+
|     Brand Header    |
+---------------------+
|                     |
|       My site       |     variable page height
|                     |
+---------------------+
|     Brand Footer    |
+---------------------+
www-website.com：

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

+---------------------+
|     Brand Header    |
+---------------------+
|                     |
|       My site       |     variable page height
|                     |
+---------------------+
|     Brand Footer    |
+---------------------+
品牌页眉和页脚是HTML代码块，带有内联JS。还有另一个HTML块，包含脚本和CSS。它使用jQuery的一个版本和他们脚本的一部分，实际上是自己崩溃了

我所做的：在普通页面服务器端注入他们的HTML+将我的所有脚本放在

结构如下所示：

<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/JS）内容为HTML….]
.. 我的CSS资料。。
[…修复了他们的CSS内容..]
[…他们的HTML标题..]
.. 我正常的身体。。
[…他们的HTML页脚..]
.. 我的JS。。
因此，品牌网站和非品牌网站之间的唯一区别在于，品牌网站“打开”带括号的行

注意：

  • 我将CSS修复放在
    标题的末尾
    以修复他们的CSS和我的CSS之间的冲突
  • 我把我所有的JS放在最后，这样它就可以覆盖JS中其他可能的行为
在我看来，它可以这样工作，但我想知道这是否是一个好的/健壮的想法，尤其是知道他们的代码（HTML/CSS/JS）可以更新

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

在我所做的基础上，有什么可以改进的吗？
或者是否有可能实现对我的站点的正确访问？
还是别的什么？

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

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

您的站点是否只是由静态文件和所有处理的客户端组成，还是您也在使用某种服务器端servlet/jsp？我不太喜欢iframe的想法，但我对其他选择也不感兴趣…@ZacWolf这是Django的网站。我使用服务器端代码在我的“常用”页面中注入品牌HTML片段。我没有使用phython来了解可用的HTML解析器库，但由于此环境允许服务器端处理，因此您可以构建一个python脚本来检索和解析旧页面以提取页眉/页脚HTML，然后将该内容注入新的html文件中。任何时候，只要有人要求一个页面，你的代码就可以查看原始页面是否有更改，然后重新构建新页面，否则它只提供新页面。我不明白你的CSS：在我的浏览器中，这只是将iframe定位在左上角。我还尝试了一个包含div的位置：relative，同样的故事。事实上，我可以做服务器端处理，我猜你在最后一段中描述的实际上就是我现在所做的，正如我在问题中试图解释的那样。我更新了我的问题，使事情更清楚，并解释了我已经做了什么。CSS基本上使iFrame扩展以填充其父对象，因此如果iFrame是BODY的子对象，它将导致iFrame扩展以填充屏幕。如果它是div的子级，那么该div需要具有iFrame可以扩展到的高度/宽度。但正如你所说的，我认为这是对你所要完成的事情的一个负面评价。你最好编写一个服务器端应用程序，对旧站点的html进行url提取，解析它，然后用你自己的内容标签替换它们的内容标签。有很多方法可以做到这一点，如果父站点经常更改，那么您需要实时执行服务器查询（这不是最好的主意），或者按照某种计划执行。