How do I read JS as data from a script tag?

Question

I have a external file (let's say foo.js)

function baz() {}

Then in my HTML, I import it with the script tag:

<script type="text/javascript" src="foo.js"></script>

I want to be able to get a string of the JS from inside of the script tag. I have tried jquery's html(), and the innerHTML and innerText attributes, but they all return empty strings.

Note: I am trying to avoid AJAX, because my server is slow, and to decrease the size of the webpage, even with caches.

Edit: The string I want to get would contain the data in the javascript file, not its URL:

getJsData(document.querySelector('script[src="foo.js"]')) == 'function baz() {}'

What do you mean by `I want to be able to get a string of the JS from inside of the script tag.`? — Satpal, Jul 04 '14 at 04:03
http://stackoverflow.com/questions/14904378/get-data-attribute-of-script-tag , well look over the link, the first answer might provide some insights, though not the answer to your exact question. As providing an `id` to script tags was new to me as well. — mane, Jul 04 '14 at 04:06
may be you can do this by ajax call check this answer:http://stackoverflow.com/questions/148441/how-can-i-get-the-content-of-the-file-specified-as-the-src-of-a-script-tag — Umesh Sehta, Jul 04 '14 at 04:17
As far as I know, there is no performance differences between an external script tag or an ajax call to the same uri for the web server. Both can be cached by the browser and will not hit the server if caching headers were properly set. Using an iframe instead will not ease server load either and causes quite some code clutter, so imho you really should go the ajax way. — Frédéric, Jul 31 '14 at 07:58

score 2 · Accepted Answer · answered Jul 04 '14 at 10:52

I may not exactly understand what is it and why you want to implement this. Considering that you do not want to use ajax due to slow server issues, you might as well do it old school. If your page is not very heavy, you can -

Put a hidden iframe on the page pointing its src to your JS file.
Wait for the $('document').ready() to be called inside the iframe, i.e. let the iFrame load all the content.
Copy the contents of the iframe one its loaded into the HTML element container you want.

Hope this helps!

score 0 · Answer 2 · edited Nov 19 '21 at 19:13

0

Put an id in the script tag and get that element from a jQuery selector like this:

<script type="text/javascript" id="my_id" src="foo.js"></script>

<script>
  var my_js_file = $("#my_id").attr("src");
  my_js_file.trim(".js");
</script>

edited Nov 19 '21 at 19:13

zcoop98

2,590
1
18
31

answered Jul 04 '14 at 09:31

abhsss96

353
2
11

violet313 · Answer 3 · 2015-03-14T16:15:52.803

Incidentally, this can be done without the need for iframes or ajax.

Since your external function is available to you; simply just invoke toString() on it. eg:

window.console.log(baz.toString());

Here is an example that demonstrates a typical valid reason for wanting to do this kind of thing & also it's limitations:

var strMod=GameOfLife.toString();

//real shenzi prettification lol
(strMod.indexOf(";var")>-1) && (strMod=strMod.replace(/;/g, ";\t\n"));

var nodeCtr=document.getElementById('code-block');    
var nodeCodes=document.createElement("pre");
nodeCodes.classList.add("code-snippet");
nodeCtr.appendChild(nodeCodes);
nodeCodes.innerHTML="var GameOfLife="+strMod;

SyntaxHighlighter.highlight({brush: "js"}, nodeCodes);

body
{
    background-color:#131313;
}

a:link,
a:visited
{
    color: rgba(185, 176, 218, 0.78);
    text-decoration: none;
}

a:hover,
a:focus
{
    color: rgba(41, 129, 241, 0.78);
    cursor: pointer;
    cursor: hand;
    text-decoration: underline;
}

#code-block
{
    max-width:800px;
    overflow:auto;
}

#code-block .syntaxhighlighter
{
    margin:20px;
    font-size:10px!important;
    overflow:visible!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEmacs.css" rel="stylesheet"/>

<script src="https://cdn.rawgit.com/nomatteus/conway-game-of-life-js/master/gameoflife.js"></script>


<a href="https://github.com/nomatteus/conway-game-of-life-js">
    Conways Game of Life ~ js-stylee! ~ by Matthew Ruten
</a>

<div id="code-block"></div>

&fiddle with it here

As can be seen; in some browsers, this particular usage is going to work more or less well, depending upon the toString() implementation. -all of which is discussed in this nice little article

Another caveat: this trick also won't work so well on Objects that are not functions or functions that immediately execute (ie: RMP) etc.

How do I read JS as data from a script tag?

3 Answers3

Linked