javascript 动态添加多个脚本以在React应用程序的head和body部分执行

83qze16e 于 2023-06-28 发布在 Java

关注(0)|答案(2)|浏览(113)

我有一个后端API，它在head_script和body_script键中提供了一些JavaScript代码。例如：

{
   "head_script": "<script>console.log('abc1')</script><script>console.log('abc2')</script><script>console.log('abc3')</script><script>console.log(abc4')</script>",
   "body_script": "<noscript><iframe src='.......'></iframe></noscript>"
}

我试图在head标签中加载这些脚本的内容如下，body标签也是如此。

document.head.innerHTML = document.head.innerHTML + scripts['head_script']

我检查了html，看到那些附加在head和body标签中的标签，但没有发现代码的影响。
你的建议将受到赞赏。谢谢
在上一节中已经描述过

JavaScript

来源：https://stackoverflow.com/questions/76555452/adding-multiple-script-dynamically-to-execute-in-head-and-body-section-in-the-re

2条答案

按热度按时间

f0brbegy1#

使用innerHTML，脚本不会自动执行。这是因为它不会触发浏览器的内置脚本执行机制。
但是，您可以通过在文档中创建并追加<script>标记来执行页面中的脚本。

const script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode(code));

const parent = document.head; // or document.body;
parent.appendChild(script);

为此，您需要解析head_script或body_script，收集所有脚本并使用上述方法执行<script>...</script>标记之间的代码。

赞(0）回复(0）举报 2023-06-28

rggaifut2#

您可以按照以下步骤执行此操作：

创建脚本元素

let scriptEle = document.createElement("script");

然后在里面添加自定义代码

scriptEle.text=`console.log('abc1')`;

最后你应该把它附加到正文

document.body.appendChild(scriptEle);
//or
document.head.appendChild(scriptEle);

在您的情况下，您可以使用Regex提取从API接收的所有脚本代码。并将每一个附加到正文中执行。

赞(0）回复(0）举报 2023-06-28

我来回答

javascript 动态添加多个脚本以在React应用程序的head和body部分执行

2条答案

相关问题

热门标签

最新问答