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

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

Не могли бы вы подробнее рассказать о том, чего пытаетесь достичь?

Не знаете, зачем вам это нужно?

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

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

Это может быть интересно: http://ejohn.org/blog/degrading-script-tags/

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

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

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

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

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

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

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

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

I want to store the content of the script so that I can cache it and use it directly some time later without having to fetch it from the external web server (not on the same server as the page)

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

Используя привязку DOM в стиле 2008 года, это было бы лучше:

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

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

document.getElementById("myscript").innerHTML

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

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

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

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

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

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

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

if you where to have the js between and you could access it through innerHTML.

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

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

Обновлять: HTML-импорт теперь устарел (альтернативы).

---

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

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

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

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

да, Ajax - это способ сделать это, как в принятом ответе. Если вдаваться в подробности, то здесь много подводных камней. Если вы используете jQuery.load(...), предполагается неправильный тип содержимого (html вместо application / javascript), что может испортить ситуацию, поместив нежелательный <br> в ваш (scriptNode) .innerText и тому подобное. Затем, если вы используете 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.info(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.info(name, "FAIL");
                            console.info(xhr);
                            console.info(errorName);
                            console.info(errorMessage);
                            debugger;
                        }
                    },
                    makeHandler: function(name, node){
                        var THIS = this;
                        return function (fileContents, status, xhr){
                            THIS.loadedCount++;
                            //console.info("loaded", name, "content length", fileContents.length, "status", status);
                            //console.info("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.info(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>

связанный вопрос

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

длинная версия: Большинство других ответов (и принятый ответ) правильно указывают, что способ «правильный» для получения текстового содержимого файла javascript, вставленного через <script>, загруженного на страницу, использует XMLHttpRequest для выполнения другого отдельного дополнительного запроса ресурса. указано в свойстве сценария 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.info("the script text content is",xhr.responseText);
    }
  };
  xhr.send();
}
Array.prototype.slice.call(document.querySelectorAll("script[src]")).forEach(printScriptTextContent);

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

Забавно, но мы не можем, мы должны снова загрузить их через Интернет.

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

[...document.scripts].forEach((script) => {
  fetch(script.src)
      .then((response) => response.text() )
      .then((source) => console.info(source) )

})