CODEWITHSUNDEEP
javascripthtmliframe
lajarre
lajarre

Reputation: 5162

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).

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:

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?

Upvotes: 1

Views: 992

Answers (1)

ZacWolf
ZacWolf

Reputation: 762

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?

Upvotes: 1

Related Questions