Ah yes, I see exactly what you need now. So you can add in javascript coding directly but your CMS framework doesn't allow external files to be included. There is good and bad news I suppose. Basically you can never add javascript to a page by trying to dynamically write it in to the page. The only way to add javascript coding to a page after it has loaded would be the (dreaded) use of eval(). You are trying to include an entire javascript file and since it isn't located on the same domain it would appear we may run in to yet another problem. Through AJAX you could get the contents of this js file and then use eval() to actively add the code to your page (to be used) but AJAX often has problems with cross-domain request. It's possible Google has set the proper headers to allow this but if not then you'd be out of luck. In the event they don't allow for any cross-domain request you'd be stuck using another step which involves a simple PHP script.
So to break this down:
- You have to eval() javascript to dynamically add it to a page
- AJAX can grab contents of external js files to eval()
- PHP will likely be necessary unless you have a copy of Google's jsapi on your domain
For the sake of saving extra communication steps I'll include the AJAX code that would work if the cross-domain request somehow works. Or if you are able to upload the jsapi to your server you could simply substitute the url and it would definitely work.
<script type="text/javascript">
function setReqObj() {
var nAjax;
if(window.XMLHttpRequest) {
nAjax = new XMLHttpRequest();
} else {
nAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
return nAjax;
}
function _LoadExtJS($url) {
var xmlhttp = setReqObj();
if(xmlhttp) {
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState == 4) {
// eval(xmlhttp.responseText);
var _EvalAlt = new Function(xmlhttp.responseText);
_EvalAlt();
}
}
xmlhttp.open("GET", $url, true);
xmlhttp.send();
}
}
</script>
Just as a quick note, yes eval() is commented out. There are 2 methods to execute javascript dyamically and eval() is usually frowned upon. Both methods are really the same thing but I thought I'd include both just for the sake of sharing the knowledge.
Somewhere in the javascript you can directly add on the page you would simply call _LoadExtJS("http://www.google.com/jsapi") but remember this probably won't work. If you can locate this jsapi file on your own server then you'd simply change that url and it will work, no problems.
So if it doesn't work and you can't locate this js file locally on your server you'd be left with one final method, a PHP and AJAX combo.
<script type="text/javascript">
function setReqObj() {
var nAjax;
if(window.XMLHttpRequest) {
nAjax = new XMLHttpRequest();
} else {
nAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
return nAjax;
}
function _LoadExtJS($url) {
var xmlhttp = setReqObj();
if(xmlhttp) {
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState == 4) {
// eval(xmlhttp.responseText);
var _EvalAlt = new Function(xmlhttp.responseText);
_EvalAlt();
}
}
$data = "url=" + $url;
xmlhttp.open("POST", "location/toPHP/script.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send($data);
}
}
</script>
<?php
$url = $_POST['url'];
if(!($data = file_get_contents($url))) {
exit("alert('fail');");
}
echo $data;
?>
And so with a simple modification to the AJAX script and an additional PHP file added to your server you can grab the contents of the jsapi file and then execute/eval the code adding it to your webpage to be used. Hopefully something in this lengthy post is of use to you.