Загрузите тег скрипта в виде строки и добавьте его в заголовок html.

Я хочу загрузить некоторый тег скрипта с сервера в виде строки и добавить его в заголовок HTML, но даже если я могу его добавить, он не выполняется. Вот упрощенный HTML-файл, иллюстрирующий эту ситуацию:

<head>

</head>
<body>

    <script>
        function htmlStringToElement(htmlString) {
            var template = document.createElement('template');
            htmlString = htmlString.trim();
            template.innerHTML = htmlString;
            return template.content.firstChild;
        }

        //Mocking http request
        setTimeout(function() {
            var httpResponseMock = '<script>alert("HELLO FROM HTTP RESPONSE!");<\/script>'; 
            var script = htmlStringToElement(httpResponseMock);
            document.head.appendChild(script);
        }, 1000);
    </script>
</body>

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


javascript html script-tag
person Mladen Krstić    schedule 06.12.2018    source источник
comment
Отвечает ли это на ваш вопрос? Как включить файл JavaScript в другой файл JavaScript файл?   -  person ggorlen    schedule 06.08.2020

Ответы (3)


arrow_upward
3
arrow_downward

С Jquery,

var httpResponseMock = '<script><\/script>'; 
$('head').append(httpResponseMock);

и с джаваскриптом

var httpResponseMock = '<script><\/script>'; 
document.getElementsByTagName('head')[0].appendChild(httpResponseMock);
person Community    schedule 06.12.2018
comment
Хорошо, это работает, если это сделано с jQuery, как вы сделали в первом примере, но второй пример без jQuery не работает. В любом случае подход jQuery очень полезен! Спасибо! - person Mladen Krstić; 07.12.2018

arrow_upward
3
arrow_downward

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

const script = document.createElement("script");
script.textContent = "console.log('yay it works!');";
document.head.appendChild(script);

appendChild запускает его.

person GottZ    schedule 06.12.2018
comment
Спасибо! Это хорошо работает. Я только что добавил один дополнительный шаг между ними, потому что я получаю весь тег сценария в виде чистой строки, но ваше решение было ключевым моментом, чтобы заставить эту работу работать. var httpResponseMock = '‹script›alert(ПРИВЕТ ОТ HTTP-ОТВЕТА!);‹\/script›'; var parsedScriptFromHttpResponse = htmlStringToElement (httpResponseMock); const script = document.createElement(script); script.textContent = parsedScriptFromHttpResponse.text; document.head.appendChild (скрипт); - person Mladen Krstić; 06.12.2018

arrow_upward
0
arrow_downward

Более подробное обсуждение содержится в другом вопросе про динамическую загрузку JS. Простой ответ в этом случае — использовать eval для оценки содержимого скрипта. Обратите внимание, что использование eval в основном считается плохой практикой.

person Sami Hult    schedule 06.12.2018