时间戳

首页 > 解决方案 > 如何在 React SPA 中实现添加自定义 js 代码片段功能？

javascript - 如何在 React SPA 中实现添加自定义 js 代码片段功能？

问题描述

我正在构建一个白标 Web 应用程序。我需要实现添加自定义 js 代码片段功能（营销术语中的“标签”），以让营销人员添加跟踪代码，如谷歌分析代码和堆代码。在管理应用程序中，管理员可以像这样添加自定义 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) 中，我需要在文档中添加此代码段。我不知道如何实现这个功能。我尝试使用 React dangersoulySetInnerHTML 功能注入此代码片段。但 innerHTML 不允许<script>.

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

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

instapage 构建器的屏幕截图

标签： javascriptreactjs

解决方案

我实现了这样的添加自定义脚本功能。请查看代码。我希望你提出另一个好的解决方案。我制作 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);

推荐阅读