Output the contents of a JavaScript file as an alert or log in console

Question

Possible Duplicate:
How can I get the content of the file specified as the 'src' of a <script> tag?

this may seem like a strange question but it's been on my mind. Say I had a HTML file that references one or many JavaScript files, these files are local but could be external. Now for some reason (my own curiosity) I wish to output the contents of one of these files like a string and write it to the console or even alert the contents. So say I have the following JS file called jsFile.js:

// JavaScript Document
var testString = "I am just an output... or am I",
    testNumber = 1,
    testArray = [],
    testObject = {};

// random functionality, etc... etc...
if(testNumber > 100){
    // do something...
}

and I want to output this like so when opening my HTML page:

alert image

however I am unsure how to do this, can I find the SCRIPT tag in the dom and use a method on it to output it's contents (see below) or do I have to read the file (somehow) then loop through each line of code collecting it in a variable, then output it by either alert or console.log

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<script type="text/javascript" src="jsFile.js"></script>
<script type="text/javascript">

// find the JS node...
window.onload = function(){

    var theFile = document.getElementsByTagName("script")[0];

    // none of these will work as the code within the jsFile.js is not a DOM object...
    console.log(theFile.text); // returns a zero length string
    console.log(theFile.innerHTML); // returns a zero length string
    console.log(theFile.textContent); // returns a zero length string   

}

</script>
<body>
I am just a HTML file... no more, no less...
</body>
</html>

Above is my first attempt however none of these methods will work as the contents of the script are not DOM objects. I don't need a code specific answer, just a proof of concept, idea or point in the right direction. If I'm not making sense please say so and I will reword my question.

See, the problem is that javascript code (the contents of that file) won't become a part of HTML: it's essentially the same with . So there's no simple way to get it (without using AJAX, that is). ) — raina77ow, Aug 27 '12 at 13:07

epoch · Accepted Answer · 2012-08-27T13:16:29.153

3

You will need to make an AJAX request to the URL of that script and display the content where ever you want to (just grab the responseText), it is a server side resource, and the returned content will be your javascript :)

edited Aug 27 '12 at 13:16

answered Aug 27 '12 at 13:03

epoch

16,396
4
43
71

_"Pretend it is a server side resource"_ , it **is** a server-side resource. – Adi Aug 27 '12 at 13:11
@Adnan, yeah, I meant it in the context of you noramlly call, `php`, `jsp`, `asp` pages with ajax. not javascript or static html files; ill take out pretend :) – epoch Aug 27 '12 at 13:16
This answer simply is incorrect: according to the HTML 4 spec, http://www.w3.org/TR/html4/types.html#type-script , user agents must pass the contents of the file to the script engine, which means to make it available to JavaScript, which they simply do not. – Kenney Jul 06 '14 at 01:58
What makes a .txt a server-side resource and a css, image or html a client-side resource? If a txt file is available as a URL why can't the contents of it be printed out from client-side? – Oct 19 '14 at 11:47

score 0 · Answer 2 · edited May 23 '17 at 12:06

While epoch essentially has answered this already, I was triggered by this challenge, I've written a little snippet that dumps all scripting resources to the console, provided that they are upon the same domain (origin). I've tested it in Chrome.

var f = function (src) {
   var origin = location.origin || (location.protocol+'//'+location.hostname);
   if (src.substr(0, origin.length) != origin) {
      return;
   }
   x = new XMLHttpRequest();
   x.open("GET", src.substr(origin.length), true);
   x.onreadystatechange = function () {
      if (x.readyState == 4 && x.status == 200) {
         console.log(x.responseText)
      }
   };
   x.send();
};
var s = document.getElementsByTagName('script');
for (var i = 0; i < s.length; ++i) {
   f(s[i].src);
}

Output the contents of a JavaScript file as an alert or log in console

2 Answers2