Inject 3rd party HTML (with scripts) in page
Question
I am rebranding my site with a header/footer HTML code from a partner (to make the site behave like it's rebranded).
Visually:
existing-website.com:
+---------------------+
| |
| My site |
| |
+---------------------+
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. And there is also another block of HTML with scripts and CSS. It using a version of jQuery and a part of their script is actually crashing by itself.
What I did: Inject their HTML in by normal pages servers-side + put all my scripts at the end of <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 - I put all my JS in the end so that it overrides other possible behavior from their JS stuff.
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.
I was also thinking about iframing my website. No need for the CSS fixes and no JS problem then! 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). 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?
Or something else?
1 answers
solution1
1 2015-01-11 15:07:03
Keeping the iframe the size of the container is actually pretty easy with css.
iframe{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
In comments you mentioned this was a Django site. I'm just not familiar enough with that environment or with Python but after looking at their site, it does allow server side processing. 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. Do you see the other site's content changing much that you would need to synchronize to?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.