Запуск JavaScript, загруженного с помощью XMLHttpRequest - PullRequest
Новая
       34

Запуск JavaScript, загруженного с помощью XMLHttpRequest

11 голосов
/ 16 сентября 2010

У меня есть сайт, который загружает информацию, используя XMLHttpRequest, когда пользователь нажимает на ссылку.Система работает хорошо, но я хотел бы иметь возможность выполнять JavaScript, собранный в этом процессе.

Это проблема, поскольку я хотел бы загружать сценарии «по требованию», если бы это было, а не загружать их всекогда страница загружена.

Спасибо за любую помощь

Ответы [ 5 ]

9 голосов
/ 16 сентября 2010

Я считаю, что рекомендуемое решение выглядит примерно так: 

function include(scriptUrl)
{
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", scriptUrl);
    xmlhttp.onreadystatechange = function()
    {
        if ((xmlhttp.status == 200) && (xmlhttp.readyState == 4))
        {
            eval(xmlhttp.responseText);
        }
    };
    xmlhttp.send();
}

или что-то в этом роде.

Однако, будьте осторожны с таким подходом.Он уязвим для межсайтовых сценариев, которые могут открыть вас (и ваших пользователей) до всевозможных мерзостей.Вы хотите принять соответствующие меры предосторожности.

6 голосов
/ 07 июля 2015

Недавно я нашел ответ (работает в Chrome, в других браузерах не тестировался).

Вы можете создать строку dataURL и поместить ее в атрибут src элемента script. 

var xhr = XMLHttpRequest(),
    doc = document;
xhr.open('GET', pathToJSFile, true);
xhr.onload = function () {

    var script = doc.createElement('script'),
        base64 = 'data:application/javascript;base64,';
    try {
        base64 += btoa(data.responseText);
    } catch (e) {
        // script file may contain characters that not included in Latin1
        var symbols = data.responseText.split('');
        for (var i = 0, l = symbols.length; i < l; i++) {
            var symbol = symbols[i];
            // here we are trying to find these symbols in catch branch
            try {
                btoa(symbol);
            } catch (e) {
                var code = symbol.charCodeAt(0).toString(16);
                while (code.length < 4) {
                    code = '0' + code;
                }
                // replace original symbol to unicode character
                symbols[i] = '\\u' + code;
            }
        }
        // create new base64 string from string with replaced characters
        base64 += btoa(symbols.join(''));
    } finally {
        script.src = base64;
        // run script
        doc.body.appendChild(script);
    }

};
xhr.send();

Вы можете подписаться на xhr.onprogress, чтобы показать индикатор выполнения.

Обновление . Вы можете загрузить файл сценария как blob, а затем создать blob-url. 

var xhr = XMLHttpRequest(),
    doc = document;
xhr.responseType = 'blob';
xhr.open('GET', pathToJSFile, true);
xhr.onload = function () {

    var script = doc.createElement('script'),
        src = URL.createObjectURL(xhr.response);

    script.src = src;
    doc.body.appendChild(script);
};
xhr.send();
5 голосов
/ 16 сентября 2010

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

eval()

Однако я бы порекомендовал вам добавить новый 

<script src='..'></script>

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

0 голосов
/ 07 февраля 2016

У меня был вызов в мобильном веб-проекте, волшебство заключалось в том, чтобы установить «overrideMimeType». Это было проверено для работы с Android 4.1 до Android 6.0. 

var head = document.getElementsByTagName('head');
var injectedScript = document.createElement('script');
head[0].appendChild(injectedScript);

var myRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function() {
  if (myRequest.readyState == 4 && myRequest.status == 200) {
        injectedScript.innerHTML = myRequest.responseText;
    //run a function in the script to load it   
  }
};

function start(){
    myRequest.open('GET', 'javascript-url-to-download', true);
    myRequest.overrideMimeType('application/javascript');
    myRequest.send();
}

start();
0 голосов
/ 16 сентября 2010

Вам потребуется использовать eval для анализа javascript из XHR, обратите внимание, что это ЧРЕЗВЫЧАЙНО опасно, если вы не полностью доверяете источнику javascript.

...