Dynamically including javascript in a web page
Aka: Ajax loading of javascript, runtime loading

AJAX Response 1: req1.reponseText, req1.responseXML

<script>
alert("worked");
</script>

AJAX Response 2: req2.responseText

alert("worked");


Footnote is that the body tag could be swapped with the head tag.
for scripts to work they have to be place in either the body or head tags

//Example 1 doesn't work

var body = document.getElementsByTagName("body");
var bodyElement = body.item(0);
bodyElement.innerHTML = req1.responseText + bodyElement.innerHTML ;

//Example 2 doesn't work

var body = document.getElementsByTagName("body");
var bodyElement = body.item(0);
bodyElement.appendChild(document.importNode(req1.responseXML.documentElement,true));

//Example 3 works

var body = document.getElementsByTagName("body");
var bodyElement = body.item(0);
var script = document.createElement("script");
script.setAttribute("language","javascript");
script.setAttribute("type","text/javascript");
script.setAttribute("src","somescript.js");
bodyElement.appendChild(script);

//Example 4 works

var body = document.getElementsByTagName("body");
var bodyElement = body.item(0);
var script = document.createElement("script");
script.setAttribute("language","javascript");
script.setAttribute("type","text/javascript");
script.appendChild(document.createTextNode(req2.responseText));
bodyElement.appendChild(script);

//Example 5 works
//Note eval has limited scope and won't be accessable later

var body = document.getElementsByTagName("body");
var bodyElement = body.item(0);
eval(req2.responseText);

//Example 6 works - during load only
Reference:http://www.phpied.com/javascript-include/

function include(script_filename) {
document.write('<' + 'script');
document.write(' language="javascript"');
document.write(' type="text/javascript"');
document.write(' src="' + script_filename + '">');
document.write('</' + 'script' + '>');
}


//Example 7 talks about dynamic including javascript evaluating scope
Reference:http://www.webreference.com/programming/javascript/mk/
Basically anything that executes in the eval scope won't be in the global scope
to solve this he evals functions into the window(could also use self) to have
global scope

function loadScript(scriptpath, functions){
var oXML = getXMLHttpObj();
oXML.open('GET', scriptpath, false);
oXML.send('');
eval(oXML.responseText);
for(var i=0; i<functions.length; i++)
window[functions[i]] = eval(functions[i]);
}
loadScript('scripts/file1.js',['function1','function2']);


//Php Headers for dynamically creating javascript
Reference:http://www.phpied.com/javascript-include/

// javascript header
header('Content-type: text/javascript');
// Date in the past
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
// always modified
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
// HTTP/1.1
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);

echo 'alert('' . rand(1,100) . '')';
?>

Comments

Popular posts from this blog

Vim vi how to reload a file your editing