Loading external content together with (external) scripts

**molendijk** · 05-18-2011, 11:06 PM

1) CODE TITLE: Loading external content together with (external) scripts

2) AUTHOR NAME: Arie Molendijk

3) DESCRIPTION:
We can use Ajax to dynamically update our page without page-reload. Unfortunately, Ajax does not bring in (by itself) the scripts belonging to the external content we want to include. I propose a script that does exactly that.

4) URL TO CODE:
http://www.let.rug.nl/molendyk/inclu...r_with_scripts

EDIT:
I modified the script for easier usage. New URL TO CODE:
http://www.let.rug.nl/molendyk/inclu...r_with_scripts
All we have to do now is putting this in the head of the main page:

Code:

<script type="text/javascript">
var str = '';

/*Creating an (invisible) iframe for importing external content and a div for importing external scripts. The script as a whole won't work in IE7 if we do it the standard DOM way. So I use document.write*/
document.write('<iframe style="position:absolute; left: -10000px; width: 30px; height: 30px; display: none" name="ifr"><\/iframe>')
document.write('<div id="script_container"><\/div>')


/* Specifying the url of the external page that we want to put in the iframe and, subsequently, extract from the iframe */
function get_url(url)
{
frames['ifr'].location.replace(url)
}

/* Representing the source of the iframe (used to extract external content) as a string */
function create_string()
{
str=frames['ifr'].document.documentElement.innerHTML
}

/* Inserting the string into a div of our choice, and interpreting the code that may be contained in the string. */
function include(content,div)
{
document.getElementById(div).innerHTML=content;

var html_doc = window.frames.ifr.document;
var js = html_doc.createElement('script');
js.type="text/javascript";
js.text='function bring_code_to_main(){var el = document.getElementsByTagName("script");var search_limit = el.length-1;for(var x=0; x < search_limit; x++){newScript = top.document.createElement("script");newScript.type = "text/javascript";if(el[x].src != "") {newScript.src=el[x].src;newScript.text=""} else {newScript.text = el[x].text;}top.document.getElementById("script_container").innerHTML="";top.document.getElementById("script_container").appendChild(newScript);}};setTimeout("bring_code_to_main()",0)'; html_doc.getElementsByTagName('body').item(0).appendChild(js);

}

/* Making it work*/
function iframe_include(url,div)
{where=div
get_url(url);setTimeout("create_string();include(str,where)",200)
}

</script>

Usage:

Code:

<a href="javascript: void(0)" onclick="iframe_include('external.html','some_div')">include external.html</a>

(Of course, there should be a div having id='some_div' on the page!).

**molendijk** · 06-06-2011, 05:28 PM

I noticed that the (modified) script even works if we want to include menus having complicated js and css, provided we put the css of the external file in the head of the main document. There should be a way to do this automatically, but I don't know yet how to achieve that.
So what I said in the demo, under 'Including whole menus', turns out to be too pessimistic. I'll change the info in the demo as soon I can use a decent computer. (The place where I am now is rather primitive from a technical point of view).
===
Arie.

**jscheuer1** · 06-07-2011, 01:41 PM

Does this work repeatedly? Like could you keep switching the content with various and/or the same script with the same and/or different content, essentially importing multiple times without there being some collisions? What about default content - content that's already in the div on page load? What happens to that if you want to get it back later after replacing it and have no external page for it?

Anyways, I'm finding I have to click on the link twice or three times to get it to work. That's in Firefox, Chrome and IE the first time I view the page or if I clear the cache between attempts. In Opera - always.

**molendijk** · 06-07-2011, 04:49 PM

Originally Posted by jscheuer1

Does this work repeatedly? Like could you keep switching the content with various and/or the same script with the same and/or different content, essentially importing multiple times without there being some collisions?

Yes, it's supposed to work repeatedly, with the same or different content.

Originally Posted by jscheuer1

What about default content - content that's already in the div on page load? What happens to that if you want to get it back later after replacing it and have no external page for it?

There should not be static default content. Dynamically inserted default content can be imported via 'onload'.

Originally Posted by jscheuer1

Anyways, I'm finding I have to click on the link twice or three times to get it to work. That's in Firefox, Chrome and IE the first time I view the page or if I clear the cache between attempts. In Opera - always.

That's strange. It worked here with all the major modern browsers (and even with IE6). I cannot check it now, because I don't have access to a decent browser right now. Did you (1) try the 'second' script and (2) put the css of the files_to_be_included in the head of the main page?
Could you try this:

Code:

<!-- Valid doctype here -->
<html>

<head>
<link rel="stylesheet" type="text/css" href="flexdropdown.css" />

<link rel="stylesheet" type="text/css" href="anylinkcssmenu.css" />

<script type="text/javascript">
var str = '';

/*Creating an (invisible) iframe for importing external content and a div for importing external scripts. The script as a whole won't work in IE7 if we do it the standard DOM way. So I use document.write*/
document.write('<iframe style="position:absolute; left: -10000px; width: 30px; height: 30px; display: none" name="ifr"><\/iframe>')
document.write('<div id="script_container" style="display:inline"><\/div>')

/* Specifying the url of the external page that we want to put in the iframe and, subsequently, extract from the iframe */
function get_url(url)
{
frames['ifr'].location.replace(url)
}

/* Representing the source of the iframe (used to extract external content) as a string */
function create_string()
{
str=frames['ifr'].document.documentElement.innerHTML;

}

/* Inserting the string into a div of our choice, and interpreting the code that may be contained in the string. */
function include(content,div)
{
document.getElementById(div).innerHTML=content;

var html_doc = window.frames.ifr.document;
var js = html_doc.createElement('script');
js.type="text/javascript";
js.text='function bring_code_to_main(){var el = document.getElementsByTagName("script");var search_limit = el.length-1;for(var x=0; x < search_limit; x++){newScript = top.document.createElement("script");newScript.type = "text/javascript";if(el[x].src != "") {newScript.src=el[x].src;newScript.text=""} else {newScript.text = el[x].text;}top.document.getElementById("script_container").innerHTML="";top.document.getElementById("script_container").appendChild(newScript);}};setTimeout("bring_code_to_main()",0)'; html_doc.getElementsByTagName('body').item(0).appendChild(js);

}

/* Making it work*/
function iframe_include(url,div)
{where=div
get_url(url);setTimeout("create_string();include(str,where)",200)

}

</script>

</head>

<body >

<a href="javascript: void(0)" onclick="iframe_include('flexmenu.html','some_div');">include flex</a><br>
<a href="javascript: void(0)" onclick="iframe_include('anylinkmenu.html','some_div');">include anylink</a><br>
<div id="some_div"></div>

It works with me, provided we have a standalone anylink menu and a standalone flex menu.
===
Arie.

**molendijk** · 06-07-2011, 05:07 PM

John, if it still refuses to work with you, does it work with a timeout, like:

<a href="javascript: void(0)" onclick="setTimeout('iframe_include(\'flexmenu.html\',\'some_div\')',0)">include flex</a><br>

<a href="javascript: void(0)" onclick="setTimeout('iframe_include(\'anylinkmenu.html\',\'some_div\')',0)">include anylink</a><br><div id="some_div"></div>

?
Arie.

**jscheuer1** · 06-07-2011, 05:15 PM

I was using your live demo page.

**molendijk** · 06-07-2011, 05:25 PM

Your findings are in accordance with my own observations in so far as they relate to the first demo (first script).
But the script here (second version) should work.
===
Arie

**jscheuer1** · 06-07-2011, 07:12 PM

Nope.

**djr33** · 06-07-2011, 07:38 PM

There should not be static default content. Dynamically inserted default content can be imported via 'onload'.

My personal opinion is that Javascript should never be used unless there is default content. There should be something there if Javascript doesn't work, or if the other page doesn't load for some reason. Is it possible then to have a fallback? Maybe you're just saying you can't revert to the default (static) content after loading something else. That would be ok.