title: Inject 3rd party HTML (with scripts) in page
body: <p>I am rebranding my site with a header/footer HTML code from a partner (to make the site behave like it's rebranded).</p>
  
  <p>Visually:</p>
  
  <p>existing-website.com:</p>
  
  <pre><code>+---------------------+
  |                     |
  |       My site       |
  |                     |
  +---------------------+
  </code></pre>
  
  <p>wrapped-website.com:</p>
  
  <pre><code>+---------------------+
  |     Brand Header    |
  +---------------------+
  |                     |
  |       My site       |     variable page height
  |                     |
  +---------------------+
  |     Brand Footer    |
  +---------------------+
  </code></pre>
  
  <p>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.</p>
  
  <p>What I did: Inject their HTML in by normal pages servers-side + put all my scripts at the end of <code>&lt;body&gt;</code></p>
  
  <p>The structure looks like:</p>
  
  <pre><code>&lt;head&gt;
    [.. their head (CSS/JS) stuff as HTML ..]
    .. my CSS stuff ..
    [.. fixes for their CSS stuff ..]
  &lt;/head&gt;
  &lt;body&gt;
    [.. their HTML header ..]
    .. my normal body ..
    [.. their HTML footer ..]
    .. my JS ..
  &lt;/body&gt;
  </code></pre>
  
  <p>Thus the only difference between the branded and non-branded site is that the branded-site <strong>"switches on" the lines with brackets</strong>.</p>
  
  <p>NB:</p>
  
  <ul>
  <li>I put CSS fixes at the end of <code>head</code> to fix conflicts between their CSS and mine</li>
  <li>I put all my JS in the end so that it overrides other possible behavior from their JS stuff.</li>
  </ul>
  
  <p>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.</p>
  
  <p>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 (<code>height</code> 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.</p>
  
  <p>Is there something I can enhance on what I did?<br>
  Or is it possible to achieve iframing my site correctly?<br>
  Or something else?</p>