Question

我想从服务器作为字符串加载一些脚本标记并将其附加到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>

我想原因是动态添加脚本时已经渲染了头文件，但是还有其他方法可以实现吗？

Answer 1

使用Jquery，

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

并使用javascript

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

Answer 2

除非您知道自己在做什么，否则永远不要使用innerHTML。
如果您真的想将脚本动态注入文档中，请执行此操作或使用eval：

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

appendChild正在运行它。

Answer 3

another question中有关于JS动态加载的更长的讨论。在这种情况下，简单的答案是使用eval评估脚本内容。请注意，尽管使用eval通常被认为是bad practice。

将脚本标签加载为字符串并将其附加到html标头

3 个答案: