如何获取指定为<script>标记的'src'的文件内容？

Question

如果我有这样的脚本标记:

<script
    id = "myscript"
    src = "http://www.example.com/script.js"
    type = "text/javascript">
</script>

我想获取"script.js"文件的内容.我正在考虑类似document.getElementById("myscript").text但在这种情况下它不起作用.

Answer 1

您想获取文件http://www.example.com/script.js的内容吗？如果是这样,您可以转向AJAX方法来获取其内容,假设它与页面本身位于同一服务器上.

你能详细说明你想要完成的事情吗？

Answer 2

我知道它有点晚了,但有些浏览器支持标签LINK rel="import"属性.

http://www.html5rocks.com/en/tutorials/webcomponents/imports/

<link rel="import" href="/path/to/imports/stuff.html">

对于其他人来说,ajax仍然是首选方式.

Answer 3

我认为这些内容不会通过DOM提供.您可以获取src属性的值并使用AJAX从服务器请求文件.

Answer 4

tl; dr脚本标记不受CORS和同源策略的约束，因此javascript / DOM无法提供对通过<script>标记加载的资源的文本内容的访问，否则它会中断same-origin-policy。

长版本： 大多数其他答案（以及公认的答案）正确表明，“ 正确 ”的方式来获取通过<script>加载到页面中插入的javascript文件的文本内容，它使用XMLHttpRequest来执行另一个单独的附加请求scripts src属性中指示的资源，以下简短的javascript代码将演示这些内容。但是，我发现其他答案并没有解决获取javascript文件文本内容的问题，即允许访问通过包含的文件内容<script src=[url]></script>会破坏CORS策略，例如，现代浏览器会阻止XHR资源提供访问控制允许来源标头，因此浏览器不允许使用除以外的其他任何方式CORS来获取内容。

使用以下代码（如在其他问题“使用XHR / AJAX”中提到的那样），可以对文档中所有非内嵌脚本标签进行另一个请求。

function printScriptTextContent(script)
{
  var xhr = new XMLHttpRequest();
  xhr.open("GET",script.src)
  xhr.onreadystatechange = function () {
    if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      console.log("the script text content is",xhr.responseText);
    }
  };
  xhr.send();
}
Array.prototype.slice.call(document.querySelectorAll("script[src]")).forEach(printScriptTextContent);

因此，我不再重复，而是想通过此答案在其原因方面进行补充。