如何从脚本标记中读取JS作为数据？

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() {}'

Answer 1

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, ie 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!

Answer 2

在脚本标记中放入一个id，并从Jquery选择器中获取该元素

<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>

Answer 3

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.