1

我正在开发一项功能，该功能允许我们的用户嵌入其他服务脚本，以在使用 react.js 运行的市场上执行

下图描述了 Textarea 用户添加他们的脚本（只是为了丰富） 在此处输入图像描述

我遇到了使用窗口加载事件（attachEvent、addEventListener 等）的某些脚本的问题。

我认为这里的问题是在页面加载后执行的脚本和 window.onload 之后从未调用过。

我正在接收脚本并将脚本标签提取为文本，然后将它们转换为有效的 HTML 脚本节点

下面的代码解释了这个过程

  1. 项目清单
function htmlTextToHtmlNode(htmlText) {
    const el = document.createElement('dev')
    el.innerHTML = htmlText
    return el.firstElementChild
}

const convertScriptsTextToDom = scriptTag => {
    try {
        const matchRegex = /<script[\s\S]*?>[\s\S]*?<\/script>/gi
        const isValidScriptTag = matchRegex.test(scriptTag);

        if (!isValidScriptTag)
            throw new Error('Invalid script tag')

        const scripts = scriptTag.match(/<script[\s\S]*?>[\s\S]*?<\/script>/gi);

        const scriptsNodes = scripts.map(htmlTextToHtmlNode);
        return scriptsNodes

    } catch (err) {
        console.error(err);
        return []
    }
}

function appendNodeToHead(element) {
    let tag = document.createElement('script');
    tag.defer = element.defer ? element.defer : true;
    tag.async = element.async ? element.async : true;

    if (element.src) tag.src = element.src

    tag.type = element.type ? element.type : "text/javascript"
    tag.innerHTML = element.innerHTML

    const body = document.getElementsByTagName('body')[0];
    body.appendChild(tag);
}


export default (scriptTag) => {
    const Nodes = convertScriptsTextToDom(scriptTag) 
    if (Array.isArray(Nodes) && Nodes.length) Nodes.forEach(appendNodeToHead)
}

有什么想法吗？

4

0 回答 0