2008-09-29 81 views
53

如果我有一个脚本标签是这样的:如何获取指定为<script>标记的“src”的文件内容?

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

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

+0

我有很难搞清楚为什么你需要访问内容方面补充?你能提供一些关于你打算如何处理的信息吗? – Gene 2008-09-29 12:19:44

+0

您的意思是script.js的内容? – 2008-09-29 12:20:19

+2

是的,我的意思是script.js的内容。我想缓存它并稍后使用它。 – 2008-09-29 12:29:56

回答

10

您想获得文件内容http://www.example.com/script.js?如果是这样,你可以转向AJAX方法来获取它的内容,假设它驻留在与页面本身相同的服务器上。

你能详细说明你想完成什么吗?

-3

不知道为什么你需要这样做?

另一种方法是将脚本保存在某个隐藏的元素中,然后使用Eval来运行它。然后你可以查询对象的innerHtml属性。

-1

如果你正在寻找访问<script>标签的属性,而不是的script.js的内容,然后XPath可能是你追求的。

它将允许您获取每个脚本属性。

如果它是您正在使用的example.js文件内容,那么您可以触发一个AJAX请求来获取它。

-1

如果提供src属性,则用户代理为required to ignore the content of the element,如果您需要从外部脚本访问它,那么您可能是做错了。

更新:我看到您添加了一条评论,指出您希望缓存脚本并稍后使用它。为了什么目的?假设你的HTTP is cache friendly,那么你的缓存需求很可能已经被浏览器处理了。

0

.text确实为您提供了标签的内容,只是您的开放标签和结束标签之间没有任何内容。您可以使用.src获取元素的src属性,然后如果您想获取JavaScript文件,您可以按照链接并为其创建ajax请求。

6

我不认为内容将通过DOM可用。您可以获取src属性的值并使用AJAX从服务器请求文件。

0

在我以前的答案评论:

我想要存储脚本的内容,这样我可以高速缓存,并直接一段时间后,使用它,而无需从外部Web服务器上获取它(与页面不在同一台服务器上)

在这种情况下,最好使用服务器端脚本来获取和缓存脚本文件。根据您的服务器设置,您可以只使用文件(如果您希望更改,可以定期通过cron),或者用您选择的语言的小脚本进行类似的操作。

-2

使用2008年式的DOM结合它宁愿:

document.getElementById('myscript').getAttribute("src"); 
document.getElementById('myscript').getAttribute("type"); 
-2

希望你已经在使用一些 JavaScript库...

什么让src属性的值,该网址,然后使用您的库的Ajax工具向该URL发出请求并在需要的地方保存该结果?

具体的细节会因您使用的库而异。

-1

我建议这个问题的答案是使用DOM元素的“innerHTML”属性。当然,如果这个脚本已经加载了,那么你需要做而不是需要做一个Ajax调用来获取它。

所以Sugendran应该是正确的(不知道他为什么被拒绝而没有解释)。

var scriptContent = document.getElementById("myscript").innerHTML; 

脚本元素的innerHTML属性应该给你的脚本内容以字符串形式提供的脚本元素是:

  • 内联脚本,或
  • 脚本加载(如果使用src属性)

olle也给出了答案,但我认为它得到了'混乱',他建议它需要通过ajax f加载首先,我认为他的意思是“内联”而不是介于两者之间。

如果你在哪里有js,你可以通过innerHTML访问它。


对此技术的有用:

我看着越来越“未定义的变量”,这是不是之后使用记录(的JavaScript异常),这种技术用于客户端错误包含在我自己的脚本中(比如从工具栏或扩展中严重插入的脚本) - 所以我不认为这是一个想法。

1

我有同样的问题。在html文件中似乎没有解决这个问题的方法(缺少ajax)。但是,当我在PHP是,至少,下面已经被证明是非常有帮助的:

<script type="text/javascript" id="myScript"><?php readfile('filepath/myScript.js'); ?></script> 

然后你就可以抓住script标签的内容与正常getElementById('myScript').text;

0

是的,就像在公认的答案中一样,Ajax就是这样做的。如果你深入细节,有很多陷阱。如果使用jQuery.load(...),则假定错误的内容类型(html代替application/javascript),这会通过将不需要的<br>放入您的(scriptNode).innerText和其他类似内容中而导致混乱。然后,如果您使用的是jQuery.getScript(...),则会立即执行下载的脚本,这可能不是您想要的(如果您有多个文件,可能会导致您要加载文件的顺序)

I发现最好使用jQuery.ajaxdataType: "text"

我在一个框架集的项目中使用了这种Ajax技术,其中框架集和/或几个框架需要相同的JavaScript,以避免服务器多次发送该JavaScript。

这里是代码,测试和工作:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
<html> 
    <head> 
     <script id="scriptData"> 
      var scriptData = [ 
       { name: "foo" , url: "path/to/foo" }, 
       { name: "bar" , url: "path/to/bar" } 
      ]; 
     </script> 
     <script id="scriptLoader"> 
      var LOADER = { 
       loadedCount: 0, 
       toBeLoadedCount: 0, 
       load_jQuery: function(){ 
        var jqNode = document.createElement("script"); 
        jqNode.setAttribute("src", "/path/to/jquery"); 
        jqNode.setAttribute("onload", "LOADER.loadScripts();"); 
        jqNode.setAttribute("id", "jquery"); 
        document.head.appendChild(jqNode); 
       }, 
       loadScripts: function(){ 
        var scriptDataLookup = this.scriptDataLookup = {}; 
        var scriptNodes = this.scriptNodes = {}; 
        var scriptNodesArr = this.scriptNodesArr = []; 
        for (var j=0; j<scriptData.length; j++){ 
         var theEntry = scriptData[j]; 
         scriptDataLookup[theEntry.name] = theEntry; 
        } 
        //console.log(JSON.stringify(scriptDataLookup, null, 4)); 
        for (var i=0; i<scriptData.length; i++){ 
         var entry = scriptData[i]; 
         var name = entry.name; 
         var theURL = entry.url; 
         this.toBeLoadedCount++; 
         var node = document.createElement("script"); 
         node.setAttribute("id", name); 
         scriptNodes[name] = node; 
         scriptNodesArr.push(node); 
         jQuery.ajax({ 
          method : "GET", 
          url  : theURL, 
          dataType : "text" 
         }).done(this.makeHandler(name, node)).fail(this.makeFailHandler(name, node)); 
        } 
       }, 
       makeFailHandler: function(name, node){ 
        var THIS = this; 
        return function(xhr, errorName, errorMessage){ 
         console.log(name, "FAIL"); 
         console.log(xhr); 
         console.log(errorName); 
         console.log(errorMessage); 
         debugger; 
        } 
       }, 
       makeHandler: function(name, node){ 
        var THIS = this; 
        return function (fileContents, status, xhr){ 
         THIS.loadedCount++; 
         //console.log("loaded", name, "content length", fileContents.length, "status", status); 
         //console.log("loaded:", THIS.loadedCount, "/", THIS.toBeLoadedCount); 
         THIS.scriptDataLookup[name].fileContents = fileContents; 
         if (THIS.loadedCount >= THIS.toBeLoadedCount){ 
          THIS.allScriptsLoaded(); 
         } 
        } 
       }, 
       allScriptsLoaded: function(){ 
        for (var i=0; i<this.scriptNodesArr.length; i++){ 
         var scriptNode = this.scriptNodesArr[i]; 
         var name = scriptNode.id; 
         var data = this.scriptDataLookup[name]; 
         var fileContents = data.fileContents; 
         var textNode = document.createTextNode(fileContents); 
         scriptNode.appendChild(textNode); 
         document.head.appendChild(scriptNode); // execution is here 
         //console.log(scriptNode); 
        } 
        // call code to make the frames here 
       } 
      }; 
     </script> 
    </head> 
    <frameset rows="200pixels,*" onload="LOADER.load_jQuery();"> 
     <frame src="about:blank"></frame> 
     <frame src="about:blank"></frame> 
    </frameset> 
</html> 

related question

0

TL;博士脚本标签不受CORSsame-origin-policy,因此使用Javascript/DOM不能提供访问文本内容的资源通过<script>标记加载,否则它会中断same-origin-policy

长版: 大多数其他的答案(和接受的答案)的指示正确的“正确”的方式获得通过加载到页面<script>插入JavaScript文件的文本内容,是使用XMLHttpRequest对脚本src属性中指示的资源执行另一个单独的额外请求,以下短javascript代码将演示的内容。然而,我发现其他答案没有解决为什么要获得javascript文件文本内容的问题,即允许访问通过<script src=[url]></script>包含的文件内容将打破CORS策略,例如,现代浏览器阻止不提供Access-Control-Allow-Origin标题的资源的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); 

,所以我不会重复,而是想通过这样的回答时,为什么itthat

相关问题