Как я могу получить содержимое файла, указанного как " src " тега?

Если у меня есть скрипт вроде этого:

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

Я хотел бы получить содержание "сценария.JS файл". Я думаю о чем-то вроде document.getElementById("myscript").text но это не сработает в данном случае.

15 56
javascript

15 ответов:

вы хотите получить содержимое файла http://www.example.com/script.js ? Если это так, вы можете обратиться к методам AJAX для извлечения его содержимого, предполагая, что он находится на том же сервере, что и сама страница.

не могли бы Вы уточнить, что вы пытаетесь достичь?

10

Я знаю, что это немного поздно, но некоторые браузеры поддерживают ссылку тега rel="import" собственность.

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

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

в остальном, ajax по-прежнему является предпочтительным способом.

9

Я не думаю, что содержимое будет доступно через DOM. Вы можете получить значение атрибута src и использовать AJAX для запроса файла с сервера.

5

.текст совершенно вам содержимое тега, просто у вас нет ничего между тегом и конечным тегом. Вы можете получить атрибут src элемента с помощью .src, а затем, если вы хотите получить файл javascript, вы должны перейти по ссылке и сделать запрос ajax для него.

0

в комментарии к моему предыдущему ответу:

Я хочу сохранить содержимое скрипта, чтобы я мог кэшировать его и использовать его непосредственно через некоторое время без необходимости извлекать его с внешнего веб-сервера (не на том же сервере, что и страница)

в этом случае вам лучше использовать сценарий на стороне сервера для извлечения и кэширования файла сценария. В зависимости от настройки вашего сервера вы можете просто wget файл (периодически через cron, если вы ожидаете, что он изменится) или сделать что-то подобное с небольшим скриптом на языке по вашему выбору.

0

Если вам нужно содержимое атрибута src, вам нужно будет сделать запрос ajax и посмотреть responsetext. Если у вас есть js между ними, и вы можете получить к нему доступ через innerHTML.

Это может представлять интерес:http://ejohn.org/blog/degrading-script-tags/

0

да, Ajax-это способ сделать это, как в принятом ответе. Если вы перейдете к деталям, есть много подводных камней. Если вы используете jQuery.load(...), предполагается неправильный тип контента (html вместо application / javascript), который может испортить ситуацию, поставив нежелательный <br> в код (скрипт-узел).внутренний текст и тому подобное. Тогда, если вы используете jQuery.getScript(...), загруженный скрипт немедленно выполняется, что может быть не то, что вы хотите (может испортить порядок, в котором вы хотите загрузить файлы, в случае, если у вас есть несколько из них.)

Я нашел его лучше всего использовать jQuery.ajax С dataType: "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>

вопрос

0

tl; dr теги script не подлежат CORS и политика того же происхождения и поэтому javascript/DOM не может предложить доступ к текстовому содержимому ресурса, загруженного через <script> тег, или он сломается same-origin-policy.

версия: Большинство других ответов (и принятый ответ) указывают правильно, что "правильно " способ получить текстовое содержимое файла javascript, вставленного через <script> загружается на страницу, использует XMLHttpRequest выполнить еще один отдельный дополнительный запрос на ресурс, указанный в скриптах src свойство, что-то, что короткий код javascript ниже продемонстрирует. Однако я обнаружил, что другие ответы не касались вопроса, Почему получить текстовое содержимое файлов javascript, которое позволяет получить доступ к содержимому файла, включенного через <script src=[url]></script> сломал бы CORS политики, например, в современных браузерах XHR ресурсов, которые не предоставляют Access-Control-Allow-Origin заголовок, следовательно браузеры не позволяют любой другой способ, кроме тех, которые подлежат 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);

и поэтому я не буду повторять это, но вместо этого хотел бы добавить через этот ответ на аспект почему это то, что

0

Если вы хотите получить доступ к атрибутам <script> тег, а не содержимое скрипта.js, тогда XPath вполне может быть, что вы после.

Это позволит вам получить каждый из атрибутов скрипта.

Если это пример.содержимое файла js, которое вам нужно, затем вы можете запустить запрос AJAX для его извлечения.

-1

вы хотите использовать свойство innerHTML для получения содержимого тега скрипта:

document.getElementById("myscript").innerHTML

но, как сказал @olle в другом ответе, вы, вероятно, хотите прочитать: http://ejohn.org/blog/degrading-script-tags/

-1

Если атрибут src указан, то агенты пользователей требуется игнорировать содержимое элемента, Если вам нужно получить к нему доступ из внешнего скрипта, то вы, вероятно, делаете что-то неправильно.

Update: я вижу, вы добавили комментарий к эффекту, который вы хотите кэшировать скрипт и использовать его позже. С какой целью? Предполагая, что ваш HTTP-это кэш-фрэндли, то ваши потребности в кэшировании, вероятно, уже заботятся о браузере.

-1

Я бы предложил ответ на этот вопрос, используя свойство "innerHTML" элемента DOM. Конечно, если скрипт был загружен, ты не нужно сделать вызов Ajax, чтобы получить его.

Так Sugendran должно быть правильно (не уверен, почему он был проголосован без объяснения причин).

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

свойство innerHTML элемента script должно предоставлять содержимое скриптов в виде строки, предоставленной элементом script это:

  • встроенный скрипт, или
  • что скрипт загружен (если используется атрибут src)

olle также дает ответ, но я думаю, что он "запутался", предложив сначала загрузить его через ajax, и я думаю, что он имел в виду "встроенный", а не между ними.

Если вы где иметь js между и вы могли бы получить к нему доступ через свойство innerHTML.

относительно полезности этой техники:

Я хотел использовать этот метод для регистрации ошибок на стороне клиента (исключений javascript) после получения "неопределенных переменных", которые не содержатся в моих собственных сценариях (таких как плохо введенные скрипты из панелей инструментов или расширений), поэтому я не думаю, что это такая идея выхода.

-1

используя 2008-стиль DOM-привязки это было бы скорее:

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

надеюсь, вы уже используете некоторые библиотека JavaScript...

Как насчет получения значения атрибута src, URL-адреса, а затем использовать инструменты Ajax вашей библиотеки, чтобы сделать запрос на этот URL-адрес и сохранить этот результат везде, где вы хотите это сделать?

конкретные детали будут варьироваться в зависимости от используемой библиотеки.

-2

Не уверен, зачем вам нужно это делать?

другим способом было бы держать скрипт в скрытом элементе где-то и использовать Eval для его запуска. Затем можно запросить свойство objects innerHtml.

-3