如何构建一个 JS 小部件以嵌入到不同的网站中

Question

我知道这很模糊，但我想创建一个可以嵌入到网页中并且用户可以与之交互的 JS 小部件。类似于 these 人使用他们的聊天机器人小部件所做的事情。

他们似乎使用了 iframe。如果我想打包一些代码并使其易于嵌入到其他网站中，使用 iframe 有什么好处吗？是否与 cookie 跟踪等有关？

谢谢

Answer 1

要构建一个 JS 小部件，您有很多选择，我将在下面描述其中的两个：

1- 使用 iFrame ：这种方法是最容易实现的方法，唯一的缺点是您的小部件代码将无法与主机的网页内容进行交互.反之亦然，您的主机 Web 应用程序代码将无法与您的 iFrame 内容进行交互。要实施此方法，您必须托管 iFrame 内容并在宿主应用程序内的 iFrame 标记中引用它。

2-制作一个HTML渲染器模块：这种方法是最可定制的。怎么运行的：您将必须制作一个 JS 脚本来呈现您的 HTML 内容。例子：假设您的主机网站代码如下：

   

     // widget.js
        const widgetContentEl = document.getElementById('widget-content');
        var myWidget = document.createElement('div');
        myWidget.innerHTML = '<h1> This is my widget</h1> <p> And this is a paragraph in my widget';
        widgetContentEl.appendChild(myWidget);

<!-- index.htm -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Example host</title>
  </head>
  <body>
  <div id="widget-content"></div>
    <script src="widget.js"></script>
  </body>
</html>

这样，您可以自定义 widget.js 内容来呈现您的小部件。

希望我的回答对您有所帮助。

如何构建一个 JS 小部件以嵌入到不同的网站中

How to architect a JS widget to be embedded in different websites

html

javascript

css

iframe