Добавление HTML-скриптов в DOM в приложении React - PullRequest
Новая
       11

Добавление HTML-скриптов в DOM в приложении React

0 голосов
/ 02 октября 2019

Я работаю над функцией, которая позволяет нашим пользователям встраивать скрипты других сервисов, которые выполняются на их торговых площадках, и работает с использованием activ.js

. На изображении ниже показано, как пользователи Textarea добавили своискрипты для (только для обогащения) enter image description here

У меня возникла проблема с некоторыми скриптами, которые используют событие загрузки окна (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)
}

Есть мысли?

...