如何在React SPA中实现添加自定义js代码段功能?

Wei Li

我正在构建一个白色标签的Web应用程序。我需要实施添加自定义js代码段功能(在营销术语中为“标签”),以允许营销人员添加跟踪代码,例如Google Analytics(分析)代码和堆代码。在管理员应用中,管理员可以像这样添加自定义js代码段。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-160375581-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-160375581-1');
</script>

如您所见,我需要同时支持<script src/><script>code</script>

在Web应用程序(Create-React-App SPA)中,我需要在文档中添加此代码段。我不知道如何实现此功能。我试图使用ReactangersoulySetInnerHTML功能注入该代码段。但是innerHTML不允许<script>

请仔细查看代码片段示例,它还必须支持用src属性指定的外部脚本

此屏幕快照将帮助您了解我要实现的功能。

Instapage Builder的屏幕截图

Wei Li

我实现了这样的添加自定义脚本功能。请检查代码。希望您提出另一个好的解决方案。我使用cloneScript函数的原因是要使HTML脚本标记没有“已经开始”状态。如果您没有任何意义,请查看此文档。https://html.spec.whatwg.org/multipage/scripting.html#script-processing-model

const cloneScript = (script) => {
  const s = document.createElement('script');

  // copy attributes
  const attrs = script.attributes;
  for (let i = 0; i < attrs.length; i++) {
    s.setAttribute(attrs[i].name, attrs[i].value);
  }

  // copy inner text of script
  s.text = script.text;

  return s;
};

const addCustomScripts = (custom_tag) => {
  try {
    const parser = new DOMParser();
    const doc = parser.parseFromString(custom_tag, 'text/html');
    const collection = doc.head.children;
    Array.from(collection)
      .map((script) => cloneScript(script))
      .forEach((script) => document.body.appendChild(script));
  } catch (e) {
    console.error(e);
  }
};

const str = `
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-160375581-1"></script>
<script id="stella" data-state="inactive">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-160375581-1');
</script>`

addCustomScripts(str);

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在XCode 6中导出/导入自定义代码段

来自分类Dev

如何在CMS在prestashop中创建的自定义页面中添加功能

来自分类Dev

ReSharper-如何在IntelliSense中显示自定义代码段

来自分类Dev

如何在Pepper插件API中添加自定义功能

来自分类Dev

如何在短代码中向wp_query添加多个自定义字段?

来自分类Dev

如何在Python 3.5中将自定义代码添加到HTTPStatus?

来自分类Dev

如何在Geany文本编辑器的“代码段”中创建自定义日期?

来自分类Dev

如何在管理表单中添加自定义功能?

来自分类Dev

如何在Keras中实现此自定义损失功能?

来自分类Dev

如何在Joi中添加自定义验证器功能?

来自分类Dev

如何在eex中向功能链接(Phoenix.HTML.link)添加自定义HTML

来自分类Dev

如何在v-slide-item中单击添加自定义功能?

来自分类Dev

如何在React Hook中添加自定义className?

来自分类Dev

如何在React中实现自定义光标组件

来自分类Dev

Google Analytics(分析)使用GTag,如何在JavaScript中为自定义细分添加代码?

来自分类Dev

如何在SwiftUI中实现自定义回调动作?类似于onAppear功能

来自分类Dev

自定义React代码段在javascriptreact.json文件中的vscode中不起作用

来自分类Dev

如何在自定义React组件中添加onclick函数?

来自分类Dev

如何在自己的文件中的React Native中正确实现自定义组件?

来自分类Dev

如何在React Native中向标题添加自定义标题和按钮?

来自分类Dev

如何在邮件中添加自定义代码?在@message变量中添加红宝石代码

来自分类Dev

如何在Qt中添加自定义类处理功能

来自分类Dev

如何在自定义键盘按钮swift中实现功能齐全的退格键

来自分类Dev

如何在angular js中实现自定义指令?

来自分类Dev

如何在Sublime Text 2 for Linux中创建和使用自定义代码段?

来自分类Dev

如何在管理表单中添加自定义功能?

来自分类Dev

如何在TALEND中的tMap中添加自定义JAVA代码

来自分类Dev

如何在 spring boot 中自定义和添加 PKIXRevocationChecker 实现?

来自分类Dev

如何在 React 中创建自定义表?

Related 相关文章

  1. 1

    如何在XCode 6中导出/导入自定义代码段

  2. 2

    如何在CMS在prestashop中创建的自定义页面中添加功能

  3. 3

    ReSharper-如何在IntelliSense中显示自定义代码段

  4. 4

    如何在Pepper插件API中添加自定义功能

  5. 5

    如何在短代码中向wp_query添加多个自定义字段?

  6. 6

    如何在Python 3.5中将自定义代码添加到HTTPStatus?

  7. 7

    如何在Geany文本编辑器的“代码段”中创建自定义日期?

  8. 8

    如何在管理表单中添加自定义功能?

  9. 9

    如何在Keras中实现此自定义损失功能?

  10. 10

    如何在Joi中添加自定义验证器功能?

  11. 11

    如何在eex中向功能链接(Phoenix.HTML.link)添加自定义HTML

  12. 12

    如何在v-slide-item中单击添加自定义功能?

  13. 13

    如何在React Hook中添加自定义className?

  14. 14

    如何在React中实现自定义光标组件

  15. 15

    Google Analytics(分析)使用GTag,如何在JavaScript中为自定义细分添加代码?

  16. 16

    如何在SwiftUI中实现自定义回调动作?类似于onAppear功能

  17. 17

    自定义React代码段在javascriptreact.json文件中的vscode中不起作用

  18. 18

    如何在自定义React组件中添加onclick函数?

  19. 19

    如何在自己的文件中的React Native中正确实现自定义组件?

  20. 20

    如何在React Native中向标题添加自定义标题和按钮?

  21. 21

    如何在邮件中添加自定义代码?在@message变量中添加红宝石代码

  22. 22

    如何在Qt中添加自定义类处理功能

  23. 23

    如何在自定义键盘按钮swift中实现功能齐全的退格键

  24. 24

    如何在angular js中实现自定义指令?

  25. 25

    如何在Sublime Text 2 for Linux中创建和使用自定义代码段?

  26. 26

    如何在管理表单中添加自定义功能?

  27. 27

    如何在TALEND中的tMap中添加自定义JAVA代码

  28. 28

    如何在 spring boot 中自定义和添加 PKIXRevocationChecker 实现?

  29. 29

    如何在 React 中创建自定义表?

热门标签

归档