reactjs 添加第三方脚本标签(< script>)以响应应用程序

hjzp0vay  于 2022-12-29  发布在  React
关注(0)|答案(2)|浏览(283)

我正在创建一个包含在大型React项目中的组件,该组件加载一组脚本标记,如下所示

<script type="text/javascript">
/* <![CDATA[ */
    var google_conversion_id = XXXX;
    var google_custom_params = window.google_tag_params;
    var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
    <div style="display:inline;">
        <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXX/?value=0;guid=ON;script=0"/>
    </div>
</noscript>

我无法更改此脚本的内容,所以现在我使用dangerously-set-html-contentnpm包成功添加并执行这些脚本,但随后我收到以下控制台警告:

conversion.js:29 Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

当然,我希望我可以告诉谷歌从代码中删除这一点...但是,可悲的是,他们不会这样做,所以我想知道如何能够加载这种脚本,使他们的工作。
我尝试按照其他人的建议更改<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js" async></script>,但警告仍然存在。

eagi6jfj

eagi6jfj1#

您可以使用react-helmet从组件推送标记。

dy1byipe

dy1byipe2#

您可以将任何脚本导入到react项目中,如下所示:

loadScript = () => {
        const script = document.createElement("script");

        script.src = "https://yourlink.js";
        script.async = true;

        document.body.appendChild(script);
}

并在useEffectcomponentDidMount方法中调用此函数

相关问题