Javascript 在React应用程序上将HTML脚本附加到DOM
我正在开发一个功能，允许我们的用户嵌入其他服务脚本，在他们的市场上使用react.js运行 下图描述了用户添加脚本的Textarea（仅用于丰富内容） 我遇到了使用窗口加载事件的某些脚本（attachEvent、addEventListener等）的问题 我认为这里的问题是，加载页面后执行的脚本和window.onload之后从未调用 我正在接收脚本并将脚本标记提取为文本，然后将它们转换为有效的HTML脚本节点 下面的代码解释了这个过程Javascript 在React应用程序上将HTML脚本附加到DOM,javascript,html,reactjs,dom,window-object,Javascript,Html,Reactjs,Dom,Window Object,我正在开发一个功能，允许我们的用户嵌入其他服务脚本，在他们的市场上使用react.js运行 下图描述了用户添加脚本的Textarea（仅用于丰富内容） 我遇到了使用窗口加载事件的某些脚本（attachEvent、addEventListener等）的问题 我认为这里的问题是，加载页面后执行的脚本和window.onload之后从未调用 我正在接收脚本并将脚本标记提取为文本，然后将它们转换为有效的HTML脚本节点 下面的代码解释了这个过程 列表项 函数htmlTextToHtmlNode（htm
函数htmlTextToHtmlNode（htmlText）{
const el=document.createElement（'dev'）
el.innerHTML=htmlText
返回el.firstElementChild
}
const convertScriptsTextToDom=scriptTag=>{
试一试{
常量matchRegex=/[\s\s]*？/gi
常量isValidScriptTag=matchRegex.test（scriptTag）；
如果（！isValidScriptTag）
抛出新错误（'无效的脚本标记'）
const scripts=scriptTag.match（/[\s\s]*？/gi）；
const scriptsNodes=scripts.map（htmlTextToHtmlNode）；
返回脚本节点
}捕捉（错误）{
控制台错误（err）；
返回[]
}
}
函数appendNodeToHead（元素）{
让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）；
}
导出默认值（脚本标记）=>{
const Nodes=convertScriptsTextToDom（scriptTag）
if（Array.isArray（Nodes）和&Nodes.length）Nodes.forEach（appendNodeToHead）
}