创建一个脚本元素（从脚本标记）插入Head

Question

我从受信任的服务获得了两个脚本标记。剥离CDATA后，它看起来像这样：

<script src="http://src1"></script><script src="http://src2"></script>

我需要将这些插入到Head元素中。

如果我像下面这样的人那样做，那就行了。但是，这意味着我需要从上面提到的两个传入脚本标记中解析src属性，并创建两个新元素并将src属性添加到每个元素。这不是我想做的事。

const head: HTMLHeadElement = document.querySelector("head");
let script = document.createElement('script');
script.src = "https://sourcescript";
head.insertBefore(template, head.lastChild);

有没有办法直接从下面的HTML制作HTMLElement？这将避免我必须解析src属性。

 <script src="http://src1"></script><script src="http://src2"></script>

然后我会像使用insertBefore。

在上面的代码中那样将该元素插入Head中

由于

Answer 1

尝试将带有脚本的HTML附加到新元素，然后递归其子元素并使用每个子元素的src属性动态创建新的脚本元素。然后将它们附加到头部：

var e = document.createElement('div');
e.innerHTML = '<scr'+'ipt type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></scr'+'ipt><scr'+'ipt src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></scr'+'ipt>';

var script = e.firstChild,
    scriptInserted;

while(script) {
    scriptInserted = document.createElement('script');
    scriptInserted.setAttribute('src', script.getAttribute('src'));
    document.body.appendChild(scriptInserted);
    script = script.nextSibling;
}

// Test and see if jQuery and underscore js are loaded after a second.
setTimeout(function() {
    console.log('jQuery', jQuery.fn.jquery);
    console.log('_', _.VERSION);
}, 1000);

我使用'<scr'+'ipt语法，因为当字符串中包含<script>标记时，javascript会混淆。你不会遇到问题，因为你从服务中获取了带有脚本的html。

控制台输出：

您可以在此处查看我的工作示例：http://zikro.gr/dbg/html/append-script.html