如何從腳本標記中讀取JS作為數據？

Question

我有一個外部文件（讓我們說foo.js）

function baz() {} 

然后在我的HTML中，我使用腳本標記導入它：

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

我希望能夠從腳本標記內部獲取JS的字符串。 我嘗試過jquery的html（），以及innerHTML和innerText屬性，但它們都返回空字符串。

注意：我正在嘗試避免使用AJAX，因為我的服務器速度很慢，並且即使使用緩存也會減小網頁的大小。

編輯：我想要獲取的字符串將包含javascript文件中的數據，而不是其URL：

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

Answer 1

我可能不完全理解它是什么以及為什么要實現它。 考慮到由於服務器問題導致您不想使用ajax ，您可以選擇舊學校。 如果您的頁面不是很重，您可以 -

• 在頁面上放置一個隱藏的 iframe ，將其src指向您的JS文件。

• 等待在iframe中調用$('document').ready() ，即讓iFrame加載所有內容。

• 將其加載的iframe的內容復制到所需的HTML元素容器中。

希望這可以幫助！

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

順便說一句，這可以在不需要iframes或ajax 。

由於您可以使用外部功能; 只需在其上調用toString() 。 例如：

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

這是一個示例，演示了想要做這種事情的典型正當理由以及它的局限性：

 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> 

在這里擺弄它

可以看出; 在某些瀏覽器中，這種特殊用法或多或少會有效，具體取決於toString()實現。 - 在這篇不錯的小文章中討論了所有這些內容

另一個警告：這個技巧也不會在不是立即執行的函數或函數的Objects上工作得很好（即： RMP ）等。