molendijk

I was playing around with some code recently and discovered - more or less by accident - that we can include any fully functioning standalone menu by doing the following. The scripts and styles belonging to the external file will be preserved after inclusion:
1. We put this script just before the closing body-tag of the external file:

Code:

<script type="text/javascript">
try{top.document.getElementById('container_div').innerHTML=document.documentElement.innerHTML}
catch(err){top.document.getElementById('container_div').appendChild(document.documentElement)} </script>

2. We remove the scripts and styles belonging to the head of the external file and put them in the head of the document in which we want to include the file.
3. We put the following in the head of the (main) document, above the scripts and styles that we already put there (see 2 above):

Code:

<script type="text/javascript">
//Writing an iframe that loads the external file, and a div in which it will be put by the lines given in 1 above. Using DOM methods for creating the iframe and the div, or putting the iframe / div right away in the body, don't work: we need document.write for this particular case. This script must be on top of all other codes. The iframe is invisible. The styles for the div are just examples
document.write('<iframe src="name_of_external_menu.html" name="ifr" style="position:absolute;left:-10000px"><\/iframe>')
document.write('<div id="container_div" style="position:absolute;top:270px;bottom:250px;border:2px inset silver"><\/div>')
</script>

Very strange. DEMO here.
===
Arie Molendijk.