Document-write to a specific place
after page load
[The embed technique described on this page is not presented as an alternative to existing modern techniques. Let's just say it's easy and blazing fast.]
Document.write and inner-/outerHTML
Both inner-/outerHTML and document.write offer an easy way to embed content from an external file (to your host/domain).
The advantage of document.write over inner-/outerHTML is that document.write does not only import external HTML (or text), but also the JS and CSS contained in the external file.
Cons of document.write
Unfortunately, document.write can only be used while the page in which it is used is still loading. And it only executes where encountered: it cannot inject at a given node point. Also: document.write blocks elements below it from rendering until it has finished running.
Dealing with the cons of document.write
There's a way to deal with these issues. We can indeed inject the result of document.write at any specific part of our page - even after the page has finished loading - by applying a mixture of document.write and inner-/outerHTML. The idea is to first document-write the contents of the external file(s) (that we want to embed) to an invisible div just before the closing body tag (while the page is still loading; the document.write section won't block elements below it from rendering, since there's nothing below it), and then to use inner-/outerHTML for copying the invisible div's contents to a div of our choice after page load (via a click event, for example). That div will now contain all HTML/text and code present in the external files that were invisibly written to our page. Click on demo 1 for the details. Click on demo 2 to see that code present in an external file is preserved after embed.
Pushing a portion only of document-written content to a specific place
Pushing a portion only of an external file (that has been invisibly document-written to our page) to a specific place is simple. All we have to do is to wrap that portion of the external file in a div which we give a given ID, for example: portion_of_external1, and then, in the 'receiving' page, write something like:
<a onclick="copy_docwritten('some_div','portion_of_external1')">copy part of external1.html to some_div</a>
<div id="some_div" ></div>
In this case, we don't reference the div for the invisibly document-written external file itself (here: external1, see demo 1), but a div inside the external file. DEMO: first paragraph of demo 2 above.
Styling the divs where the external content is copied
Styling the divs where the external content is pushed (copied) can be done by replacing the lines for copying document-written content to a specific place - which have the following general form:
<a onclick="copy_docwritten('some_div','bla')">copy bla to some_div</a>
<div id="some_div" ></div>
with lines like:
<a onclick="copy_docwritten('some_div','bla'); document.getElementById('some_div').style.border='1px solid red' ">copy bla to some_div</a>
<div id="some_div" ></div>
<a onclick="copy_docwritten('some_div','bla'); document.getElementById('some_div').style.padding='5px' ">copy bla to some_div</a>
<div id="some_div" ></div>
When you want to use less simple CSS, you are better of with lines like:
<a onclick="copy_docwritten('some_div','bla'); document.getElementById('some_div').className='your_class' ">copy bla to some_div</a>
<div id="some_div" ></div>
where you will have specified your_class in a style sheet or in an inline style block. Of course, when you empty the div, you will have to make sure that all styles you've given to it will be erased (since an empty div shouldn't have styles). If you use the close button provided by function copy_docwritten for emptying a div (see demo 1), the script will automatically take care of this.
Miscellaneous
- The script used here to document-write external content to an invisible block on our page uses Ajax. This means that it may not function locally with certain browsers. There's no problem on the Internet.
- It's better not to use <html> tags, <head> tags and <body> tags in the external files that you want to embed using the technique described on this page, since that might result in multiple <html> tags etc. in the page where the external content is written to.
- As the external content is embedded in the body section of the receiving page, it's better no to use <link> tags in the external files. Use <style> tags instead. Bear in mind that they are allowed in the body section and can be used to reference external CSS files, for example: <style type="text/css"> @import url("your_css.css")</style>.
- The external files we want to embed using the technique described on this page may have a .txt extension (instead of a .html extension).
Arie Molendijk, mesdomaines.nu.