Загрузите тег скрипта в виде строки и добавьте его в заголовок HTML - PullRequest
Новая
       55

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

0 голосов
/ 06 декабря 2018

Я хочу загрузить какой-либо тег сценария с сервера в виде строки и добавить его в заголовок 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>

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

Ответы [ 3 ]

0 голосов
/ 06 декабря 2018

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

0 голосов
/ 06 декабря 2018

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

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

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

0 голосов
/ 06 декабря 2018

С Jquery, 

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

и с javascript 

var httpResponseMock = '<script><\/script>'; 
document.getElementsByTagName('head')[0].appendChild(httpResponseMock);
...