Question

我正在开发一个React js项目，我应该在其中将第三方脚本（小部件）动态添加到Web应用程序中。

小部件包括任何第三方平台：Twitter，Instagram，Youplay，Youtube等。

我当前拥有的代码如下：

    appendThirdPartyScript(externalScript) {
    // Create an element outside the document to parse the string with
    const head = document.createElement("head");

    // Parse the string
    head.innerHTML = externalScript;

    // Copy those nodes to the real `head`, duplicating script elements so
    // they get processed
    let node = head.firstChild;
    while (node) {
        const next = node.nextSibling;
        if (node.tagName === "SCRIPT") {
            // Just appending this element wouldn't run it, we have to make a fresh copy
            const newNode = document.createElement("script");
            if (node.src) {
                newNode.src = node.src;
            }
            while (node.firstChild) {
                // Note we have to clone these nodes
                newNode.appendChild(node.firstChild.cloneNode(true));
                node.removeChild(node.firstChild);
            }
            node = newNode;
        }
        document.head.appendChild(node);
        node = next;
    }
}

因此，基本上，脚本的网址来自后端/ api，这就是像['http://twitter-widget.js', 'http://instagram-widget.js']这样的脚本列表

因此，由于我有一系列脚本作为字符串，因此我使用了for循环遍历每个元素并调用 appendThirdPartyScript（'somescript'）

data.externalScripts.map(script => {
      this.appendThirdPartyScript("" + script);
});

在我遇到这种情况之前，此解决方案几乎适用于所有情况： ['http://embed.tt.se/v10/tt-widget.js'，'new tt.TTWidget（{WhereToAddWidget：'tt-quiz-XMuxmuWHc'，type：'quiz'，ID：'xxx'，clientID：'xxx'，}）;'] < / p>

所以基本上我得到的错误是：

tt不是函数

我假设第一个脚本尚未完成加载（在本例中为 http://embed.tt.se/v10/tt-widget.js ），下一个正在尝试调用不存在的脚本。

当我尝试直接在index.html的head标签中对http://embed.tt.se/v10/tt-widget.js进行硬编码时，效果就消失了！

因此，这种动态添加第三方小部件的方法并不可靠。任何人都可以告诉我是否需要更改当前代码，或者任何建议将不胜感激！

Answer 1

这似乎可行，但可能不是最佳解决方案：

 const delayTime = 500; 
    externalScriptArray.forEach((script, index) => {
        setTimeout(() => {
            this.appendNewTagElementToDom(script);
        }, delayTime*index);
    });

向网络应用动态添加第三方javascript小部件

1 个答案: