Javascript 我们如何创建自己的React.js组件作为CDN链接

发布于12月21日

我在我的Next.js应用程序中有一个聊天机器人组件，我希望任何人都可以使用&lt；脚本标签在他们的网站上使用聊天机器人.假设我将组件放在公用文件夹中以具有公共访问权限.

我如何实现这种功能，以便任何人都可以在其应用程序的脚本标记中添加此链接并访问我的聊天机器人

<script type="module" src="https://my-app-url/Chatbot.js" defer></script>

推荐答案

最简单的方法是使用iframe.

您可以使用仅包含Chatbot组件的页面托管您的Next.js应用程序，并将背景 colored颜色设置为透明.

background-color : transparent;

然后，任何可以访问你的应用程序的人都可以使用iframe将聊天机器人嵌入到他们自己的网站中.加allowtransparency="true"会达到你想要的效果.

<iframe src="https://your-nextjs-app/chatbot-page" allowtransparency="true"></iframe>

IFRAME上的more info%允许透明.

要使用Java脚本创建iFrame，请执行以下操作:

// Create the iframe element
var iframe = document.createElement('iframe');

// Set the iframe attributes
iframe.src = 'https://your-nextjs-app/chatbot-page';
iframe.style.position = 'fixed';
iframe.style.bottom = '0';
iframe.style.right = '0';
iframe.style.width = '400px';
iframe.style.height = '600px';
iframe.style.border = 'none';
iframe.style.opacity = '0.5';
iframe.style.zIndex = '9999';
iframe.allowtransparency = true;
iframe.style.backgroundColor = 'transparent';

// Append the iframe to the document body
document.body.appendChild(iframe);