Question

我正在Gatsby.js中创建网站，并且我想通过onClick方法从Booksy中打开小部件。他们给了我一个剧本：

next_item

我该怎么做？函数document.write（）不起作用，已被浏览器阻止。我还尝试了条件渲染的iframe，但效果很差。

<script src="https://booksy.net/widget/code.js?id=9178&amp;country=pl&amp;lang=pl"></script>

当我单击此网站上的“进行约会”按钮时，我想得到结果： http://gentlemanbarber.pl/ 我猜我的Iframe方法无法提供此功能。那我该怎么办呢？

Answer 1

以上问题可以通过以下方法解决：

const LoadScript = () => {
    useEffect(() => {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://booksy.net/widget/code.js?id=9178&country=pl&lang=pl';
        script.async = true; 
        document.getElementById('script').appendChild(script);
    }, []);

    return  <div id='script'></div>
}

脚本在div中呈现一个按钮。但是当我转到“ http://localhost:8000/page-2/”并返回到“ http://localhost:8000/”时，按钮消失，控制台抛出错误： “未捕获的TypeError：无法读取未定义的属性'src'”。当我使用基于类的component和componentDidMount（）方法而不是hook时，也会发生同样的事情。有代码链接到存储库： https://github.com/kamilduleba/script 如何使用此脚本来渲染不会消失的按钮？

如何通过单击Gatsby.js中的按钮来打开第三方窗口小部件？

1 个答案: