Call a js from a js? How?

This site is best viewed in a modern browser with JavaScript enabled.

jhdffh

This question is a challenge. I've been tasked with executing some javascript commands from within a limited CMS framework. Due to this framework, I am unable to write code directly. But what I can do is upload js files into the body tag of the document.So instead of simply writing:

and then later:

I need to call that external file from within the js file that I upload. And then do the commands as well.

I can separate the call from the commands and put them in different js files if needed.

I've read other posts here that talk about calling a javascript file from another javascript using document.write but they didn't work. Another post used jQuery, but don't I have to call the jQuery library to begin with, which puts me back in square one.

Any insight would help.

Sup3rkirby

I do think I'm having a bit of trouble understanding exactly what your issue is here, and what you need to be able to do. Obviously the CMS you are working in limits your ability in adding code, but I'm not sure to what extents. I think the line 'upload js files into the body tag' is particularly confusing due to the word upload being used.

So really for me to be able to provide some useful insight I would like to know exactly what this CMS framework lets you do as far as adding code goes. You seem to want to add an external js file from Google and then later execute some javascript using that external js file. Typically if you can add a js file externally using the <script> tag, there wouldn't be any problems in also executing javascript code in a different set of script tags. So I'm just looking for a bit of clarification I guess. What code can you add (that works) and what code do you want to add (that isn't working)?

jhdffh

Sup3rkirby, thanks for replying. You are exactly right, I want to add an external js file from Google and then later execute some javascript using that external file. The only code I can add is from within a javascript file.

Here's what I can't add:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Here's what I can add:
document.write('<script type="text/javascript" src="http://www.google.com/jsapi"></script>');

Except that doesn't work.

Sup3rkirby

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.

jhdffh

Thanks, Sup3rkirby. That solved the problem! Thanks also for the added explanation. I've learned a lot :-)