在页面中注入第三方HTML（带有脚本）
[英]Inject 3rd party HTML (with scripts) in page
问题描述
I am rebranding my site with a header/footer HTML code from a partner (to make the site behave like it's rebranded). 
我正在使用来自合作伙伴的页眉/页脚HTML代码对我的网站进行品牌重塑（以使网站的行为像被重命名一样）。
Visually: 视觉：
existing-website.com: existing-website.com：
+---------------------+
| |
| My site |
| |
+---------------------+
wrapped-website.com: wrapped-website.com：
+---------------------+
| Brand Header |
+---------------------+
| |
| My site | variable page height
| |
+---------------------+
| Brand Footer |
+---------------------+
The brand header and footer are blocks of HTML code, with inlined JS. 品牌页眉和页脚是带有内联JS的HTML代码块。 And there is also another block of HTML with scripts and CSS. 此外，还有另一段带有脚本和CSS的HTML。 It using a version of jQuery and a part of their script is actually crashing by itself. 它使用的是jQuery版本，脚本的一部分实际上本身就崩溃了。
What I did: Inject their HTML in by normal pages servers-side + put all my scripts at the end of <body> 我的工作：在服务器端通过普通页面注入HTML，并将所有脚本放在<body>的末尾
The structure looks like: 结构如下：
<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>
Thus the only difference between the branded and non-branded site is that the branded-site "switches on" the lines with brackets . 因此，品牌站点和非品牌站点之间的唯一区别是，品牌站点使用括号“接通”了线 。
NB: 注意：
- I put CSS fixes at the end of
headto fix conflicts between their CSS and mine我把CSS修复在结束head，以解决他们的CSS和我之间的冲突 - I put all my JS in the end so that it overrides other possible behavior from their JS stuff. 我将所有JS放在最后，这样它就覆盖了JS中其他可能的行为。
It seems to me it can work that way, but I'm wondering if it's a good/robust idea, knowing notably that their code (HTML/CSS/JS) can be updated. 在我看来，它可以那样工作，但是我想知道这是否是个好主意，尤其是知道可以更新其代码（HTML / CSS / JS）。
I was also thinking about iframing my website. 我也在考虑对网站进行格式化。 No need for the CSS fixes and no JS problem then! 无需CSS修复，也没有JS问题！ But then I want the iframe to be as high as needed ( height corresponding to the total height of the page, even if the height is changing dynamically, see the schema above). 但是，然后我希望iframe达到所需的height （即使高度是动态变化的，其高度也与页面的总height相对应，请参见上面的架构）。 I read that it's really hard to achieve. 我读到，这确实很难实现。
Is there something I can enhance on what I did? 我在做的事情上有什么可以增强的吗？
Or is it possible to achieve iframing my site correctly? 还是有可能实现iframing我的网站正确？
Or something else? 或者是其他东西？
1 个解决方案
解决方案1
1 2015-01-11 15:07:03
Keeping the iframe the size of the container is actually pretty easy with css. 使用CSS使iframe保持容器的大小实际上非常容易。
iframe{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
In comments you mentioned this was a Django site. 您在评论中提到这是Django网站。 I'm just not familiar enough with that environment or with Python but after looking at their site, it does allow server side processing. 我只是对该环境或Python不够熟悉，但是在查看他们的站点后，它确实允许服务器端处理。 You can write a python script that will retrieve and parse the old page to pull out the header/footer html, and then inject that content into your new html file. 您可以编写一个python脚本，该脚本将检索并解析旧页面以提取页眉/页脚html，然后将该内容注入到新的html文件中。 Do you see the other site's content changing much that you would need to synchronize to? 您是否看到另一个站点的内容发生了很大的变化而需要与之同步？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.