Dynamic Iframes

Script and standard usage
This script (in the head of the document) can be used to create iframes on the fly. Standard usage:
<a style="cursor: pointer" onclick="load_external_doc('external document', '30px', '60px', '30px', '60px', '#fff', '1px solid black')">link</a>
First parameter: the external document to be loaded, it will be loaded in an iframe contained in a div; second - fifth parameters: the respective distances of the borders of the div relative to the borders of the window (left, top, right , bottom); sixth parameter: background of the top region of the div (and of the entire div if the iframe doesn't have a background); seventh parameter: borders of the div.
The exteral document may have all sorts of extensions: html, txt, pdf, jpg etc.
This standard usage of the script produces a modal iframe. The top of the div containing the iframe has two buttons: a close button (text), and a button for viewing the iframed document in a separate window (image). The image is called 'newwindow.png' and can be downloaded here (call it 'newwindow.png'). It must be put in the same folder as the page containing the link(s) to the dynamically created iframe(s). The layer used to prevent the user from clicking on elements of the main window (when the iframe is open) is gray by default.
 
Pixels and percentages
The values for the second - fifth parameters of the function must be given in pixels. This does not mean that we can't emulate percentages. For instance, if we wanted to modify the pixel values given in the example above in such a way that the distance between (all) the borders of the iframe and the borders of the window would be the equivalent of 12.5%, we could do:
<a style="cursor: pointer" onclick="load_external_doc('external_document', window.innerWidth/8 + 'px', window.innerHeight/8 + 'px', window.innerWidth/8 + 'px', window.innerHeight/8 + 'px', '#dedede', '1px solid black')">link</a>
(8 x 12.5 = 100). Demo here.
 
Turning the modal iframe into a modeless one
HIER KLOPT IETS NOG NIET, WANT HET LAAD-ICOONTJE BLIJFT AANWEZIG
The iframe produced by our script is a modal window by default, but we can make it a modeless one by adding document.body.removeChild(document.getElementById('layer_for_modal')) to the HTML for loading external content into our iframe (in the script the 'modal layer' has id="layer_for_modal"). Example:
<a style="cursor: pointer" onclick="load_external_doc('external_document', '50px', '50px', '50px', '50px', '#dedede', '1px solid black'); document.body.removeChild(document.getElementById('layer_for_modal'))">link</a>
Demo here.
 
Removing the button for viewing the iframed document in a separate window
This can be done by adding document.getElementById('newwindow_button').style.display = 'none' (in the script the button has id = "newwindow_button"). Exampe:
<a style="cursor: pointer" onclick="load_external_doc('external_document', '50px', '50px', '50px', '50px', '#dedede', '1px solid black'); document.getElementById('newwindow_button').style.display = 'none' ">link</a>
Demo here
 
Changing the background-color of the layer used to make the iframe a modal window
This can be achieved by adding setTimeout('document.getElementById(\'layer_for_modal\').style.background = \'your color\' ',1000) (the timeout is needed to prevent the layer from appearing before the iframe does):
<a style="cursor: pointer" onclick="load_external_doc('external_document', '50px', '50px', '50px', '50px', '#dedede', '1px solid black'); setTimeout('document.getElementById(\'layer_for_modal\').style.background = \'#eeeeee\' ', 1000)">link</a>
Demo here.
 
Changing the color / background of the close button (text) and of the button for viewing the iframed document in a separate window (image)
The buttons (having id = "close_external" and id = "newwindow_button" in the script) are black by default. So if we give the div containing the iframe a dark background, the buttons will hardly be visible. The solution to the problem is to use the filter propery for making them visible (or the background property, see below). Example:
<a style="cursor: pointer" onclick="load_external_doc('external_document', '50px', '50px', '50px', '50px', '#787A7B', '1px solid black'); document.getElementById('close_external').style.filter='invert(100%)'; document.getElementById('newwindow_button').style.filter='invert(100%)'">link</a>
Demo here.
We can also use a light background-color for the buttons and leave the dark color as it is:
<a style="cursor: pointer" onclick="load_external_doc('external_document', '50px', '50px', '50px', '50px', '#787A7B', '1px solid black'); document.getElementById('close_external').style.background='white'; document.getElementById('newwindow_button').style.background='white' ">link</a>
Demo here.
 
More javascript written in the HTML
We have seen above that we can heavily 'manipulate' our script by adding javascript to the HTML used for generating the iframes. There's almost nothing we can not do. Here's one last example of manipulating the script in the HTML (the div containing the iframe has id = "div_containing_external_page"):
<a style="cursor: pointer" onclick="load_external_doc('external_document', '50px', '50px', '50px', '50px', '#eeeeee', '1px solid black'); document.getElementById('div_containing_external_page').style.transform = ' translateX(-100%)'; setTimeout('document.getElementById(\'div_containing_external_page\').style.transform=\'translateX(0)\' ', 1000) ">link</a>
These lines make the iframe slide in from the left with a delay of 1 sec. Demo here.
 
CSS Media Queries
The iframes discussed on this page are created through javascript, but that does not mean that we can't use CSS to make them responsive. For instance, if we want them to have a certain left-top-right-bottom value on smaller screens, we can do something like (the div containing the iframe has id = "div_containing_external_page"):
<style>
@media screen and (max-width: 650px) {#div_containing_external_page { left: 10px!important; top: 50px!important; right: 10px!important; bottom: 50px!important}}
@media screen and (max-width: 650px) {#close_external {top: 50px!important; right: 10px!important; }}
</style>
This makes the iframes almost as high and as wide as the screen on smaller devices.
 
Final remarks
In the demos above the Wikipedia start page was used. If you want a document of your own to be iframed using the techniques described above, make sure that it has a background color of your choice, otherwise the background will be identical to the one given to the div containing the external page (the div having id = "div_containing_external_page").
Make sure to correctly write to all seven parameters of the function (function load_external_doc(...), see top of page), no blanks(!), otherwise the scripts won't work well.