I. Including a menu
In a server-side scripting language like PHP we can use include("some_file.php") to automatically include scripts from that file. We cannot do something similar on the client side using javascript. Although Ajax-includes or includes done with the help of a hidden iframe allow us to bring in external content, automatically importing the scripts belonging to external files in a crossbrowser way seems impossible (on the client side): the things that work for one browser may not function properly for another browser. (It is widely but incorrectly thought that changing an external HTML file into a js-file with the help of old school document.write can do the job, but see this (http://www.dynamicdrive.com/forums/blog.php?b=29)).

The only crossbrowser way to allow automatic execution of scripts that belong to an external file is to give the external file its own window (an iframe or a text/html object, for instance) on the 'main page'. But that way of including external content has its limitations. For instance, if the external file has a list menu with unfolding subitems, and if we want the subitems to show everywhere on the screen, then the window containing the external file must have 100% size, which makes the main window unusable.

But there's a solution. On our page, we can have a fullsize window containing it's own menu (with its own styles and scripts) and, yet, maintain accessibility of everything else on the screen, if we do the opposite of what we normally do when we include something on a page. Instead of inserting the 'menu window' into the page, we force the page to 'embed itself' into the menu window. So, all of a sudden, the menu window becomes a normal 'main window', and our main page becomes a framed page (because a page can only truly 'embed itself' in another page if it is framed). To embed the page in the menu, we can use a text/html object, except in IE, which doesn't support the object well yet. For that browser, we need an iframe (until IE starts to treat text/html objects the way non-IE treats them). Here's a technique that does it all.

Let 'menu.html' be a file that contains a HTML menu (a list menu, normally) with all the styles and scripts that make the menu work. If we put the following just before the closing head tag of 'menu.html':

<script type="text/javascript" >
var longURL = parent.document.URL;
var shortURL = longURL.substring(longURL.indexOf('?')+1, longURL.length);

//The iframe (IE) / object (non-IE) is a 'placeholder' for the pages that 'embed themselves' into the menu. Adapt styles for the iframe/object to your needs:

if(/*@cc_on!@*/false)//if IE
{//IE doesn't support the text/html-object well, so we use an iframe; adapt styles to your needs
document.write('<iframe style="position:absolute; top:0px; background:white; width:98%; height:98%;" frameborder=0 src="' + shortURL + '"><\/iframe>');}
else {//We can use a text/html-object for non-IE; adapt styles to your needs
document.write('<object type="text/html" style="position:absolute; background:white; width:98%; height:99%" frameborder=0 data="' + shortURL + '"><\/object>');}
</script>
then a few lines in the head section of a given page 'some_page.html' that is supposed to 'embed itself' in 'menu.html' will make both pages (which have their own separate windows) coexist on the screen. The scripts of each window will function normally. The lines we have to add to the head section of 'some_page.html' are:

<script type="text/javascript" >
function embed_me(){//We have menu.html below because the page is supposed to embed itself in menu.html
if (top.location == self.location)
{top.location.href="menu.html?" + document.URL.substring(document.URL.lastIndexOf('/')+1, document.URL.length) ;}
}
window.onload=embed_me;
</script>
Never mind if you don't quite understand what the codes above do exactly. But do pay attention to the following. The way we've set up the technique for 'including' a menu implies that each page that is supposed to 'embed itself' in the menu is called, from within the menu, with href="menu.html?name_of_page.html" (if the menu is put in a file named 'menu.html') or, from within a page other than 'menu.html', with href="#null" onclick="top.location.href = 'menu.html?name_of_page.html'".

Another thing to note is that our technique allows us to force foreign pages (like the Google page) to embed themselves in the menu page. We just use href="menu.html?http://www.google.com" (Google called from within the menu) or href="#null" onclick="top.location.href = 'menu.html?http://www.google.com'" (Google called from a non-foreign page other than 'menu.html').

So far so good for 'including' a menu on the client side. What about including an external file that 'is' not a menu?

II. Including other external content
We've seen that the only crossbrowser method that makes a given script belonging to an external file (continue to) work after the external file is included in a 'main page', is to give the external file its own window (an iframe or a text/html object). If the file_to_be_included is not a menu, we don't have to use the technique explained above for 'including' a menu. Rather: we don't have to use techniques for forcing a page to 'embed itself' into a menu. We just 'write out' or create a text/html object or an iframe and make sure it loads the external file. Here's a way to do it:

<!--1. Creating a text/html-object / iframe loading a 'variable url':-->

<script type="text/javascript">
function create_external(the_id,url,object_style)
{
var inserted=document.getElementById(the_id);
if(/*@cc_on!@*/false)
{
inserted.innerHTML='<iframe src="' + url + '", style="'+ object_style +'"><\/iframe>'
}
else
{
inserted.innerHTML='<object type="text/html" data="' + url + '", style="'+ object_style +'"><\/object>'
}
}
</script>

<!--2. Putting external content in the text/html object or iframe / loading and calling it (values for styles only serve as an illustration):-->
href="#" onclick="create_external('some_id','some_file', 'position:absolute; width:190px; height:250px; background-color:yellow; left:0px; border:1px solid red;margin-top:9px'); return false; "

<!--3. Putting a div in the body where the create_external function outputs its result:-->
<div id="some_id" style="display:inline"></div>
DEMO HERE (http://molendijk.110mb.com/include_menu13_no_scriptloss/menu.html?page1.html).
===
Arie Molendijk.