Javascript 将脚本标记作为字符串加载，并将其附加到html标头_Javascript_Html_Script Tag

Javascript 将脚本标记作为字符串加载，并将其附加到html标头

javascript html

Javascript 将脚本标记作为字符串加载，并将其附加到html标头,javascript,html,script-tag,Javascript,Html,Script Tag,我想从服务器加载一些脚本标记作为字符串，并将其附加到HTML头中，但即使我可以附加它，它也不会执行。下面是一个简化的HTML文件来说明这种情况： <head> </head> <body> <script> function htmlStringToElement(htmlString) { var template = document.createElement('template');

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


函数htmlStringToElement（htmlString）{
var template=document.createElement（'template'）；
htmlString=htmlString.trim（）；
template.innerHTML=htmlString；
返回template.content.firstChild；
}
//模拟http请求
setTimeout（函数（）{
var httpResponseMock='警报（“来自HTTP响应的你好！”）；'；
var script=htmlStringToElement（httpResponseMock）；
document.head.appendChild（脚本）；
}, 1000);

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

使用Jquery

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

var-httpResponseMock=''；
$（'head'）.append（httpResponseMock）；

并且使用javascript

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

var-httpResponseMock=''；
document.getElementsByTagName（'head'）[0].appendChild（httpResponseMock）；

使用Jquery

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

var-httpResponseMock=''；
$（'head'）.append（httpResponseMock）；

并且使用javascript

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

var-httpResponseMock=''；
document.getElementsByTagName（'head'）[0].appendChild（httpResponseMock）；

中有一个关于动态加载JS的较长讨论。本例中的简单答案是使用

eval

评估脚本内容。请注意，尽管使用

eval

被认为是一个主要的问题。

中关于动态加载JS有一个较长的讨论。本例中的简单答案是使用

eval

评估脚本内容。但是请注意，使用

eval

被认为是一种主要的错误。

除非您知道自己在做什么，否则永远不要使用innerHTML。
如果确实要将脚本动态注入文档，只需执行以下操作或使用eval：

const script=document.createElement（“脚本”）；
script.textContent=“console.log（'yay it works！'）；”；
document.head.appendChild（脚本）除非您知道自己在做什么，否则永远不要使用innerHTML。

如果确实要将脚本动态注入文档，只需执行以下操作或使用eval：

const script=document.createElement（“脚本”）；
script.textContent=“console.log（'yay it works！'）；”；
document.head.appendChild（脚本）谢谢！这很有效。我只是在这两者之间添加了一个额外的步骤，因为我将整个脚本标记作为一个纯字符串接收，但您的解决方案是实现这一点的关键。var httpResponseMock='警报（“来自HTTP响应的你好！”）；'；var parsedScriptFromHttpResponse=htmlStringToElement（httpResponseMock）；常量脚本=document.createElement（“脚本”）；script.textContent=parsedsscriptfromHttpResponse.text；document.head.appendChild（脚本）；谢谢这很有效。我只是在这两者之间添加了一个额外的步骤，因为我将整个脚本标记作为一个纯字符串接收，但您的解决方案是实现这一点的关键。var httpResponseMock='警报（“来自HTTP响应的你好！”）；'；var parsedScriptFromHttpResponse=htmlStringToElement（httpResponseMock）；常量脚本=document.createElement（“脚本”）；script.textContent=parsedsscriptfromHttpResponse.text；document.head.appendChild（脚本）；如果像第一个示例中那样使用jQuery，那么它是可以工作的，但是没有jQuery的第二个示例不起作用。总之jQuery方法非常有用！谢谢如果像第一个示例中那样使用jQuery，那么它是可以工作的，但是没有jQuery的第二个示例不起作用。总之jQuery方法非常有用！谢谢这回答了你的问题吗？这回答了你的问题吗？