Dynamically including javascript in a web page
Dynamically including javascript in a web page
Aka: Ajax loading of javascript, runtime loading
AJAX Response 1: req1.reponseText, req1.responseXML
AJAX Response 2: req2.responseText
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
//Example 2 doesn't work
//Example 3 works
//Example 4 works
//Example 5 works
//Note eval has limited scope and won't be accessable later
//Example 6 works - during load only
Reference:http://www.phpied.com/javascript-include/
//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
//Php Headers for dynamically creating javascript
Reference:http://www.phpied.com/javascript-include/
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/
?php
// 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