javascript - 如何将小部件添加(嵌入)到另一个网站，如 tawk.to、disqus 等？

Question

我正在尝试制作一个可以通过代码嵌入添加到另一个网站的小部件，就像 tawk.to。
我曾尝试使用带有嵌入的 iframe 和对象，但由于某种原因它很慢。作为一个页面，它快速获取图像，但是当我嵌入它时，它很慢。我也听说这不是最佳实践。
所以我搜索了其他网站在做什么，我发现 disqus 正在使用 iframe 而 tawk 正在使用以下代码。由于消息小部件不使用太多数据，iframe 似乎可以工作，但就我而言，我的小部件正在从 API 获取大量数据。
tawk.to 正在使用此代码:

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/APIKEY';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

我已经有一个页面，我想使用某些东西放入另一个网站页面？
它会显示一个像 tawk.to 这样的小图标，当点击它时，它会在小部件中显示页面。
我怎样才能做到这一点？

Answer 1

关于您的问题，我将创建一个脚本，直接在 div 内从 API 获取数据。在那里，做吧。让它发挥作用，停止思考其他人在做什么。
由于我也是新手，我以前经常问这样的问题，直到最近。没有得到太多回应.. 我发现与其询问如何按照“最佳实践”或一般其他人的系统来完成这些，我只会让它按照我希望我的系统工作的方式工作。因此，除非您正在为客机或其他东西编程自动驾驶仪，否则就做您想做的事。如果它有效，它就有效。改进是后来的。该站点可能最适合非常具体的编程问题。
看看 Web 应用程序是如何在 90 年代或仅仅 5 年前创建的 - 当时和今天一样的人通常会告诉您它是如何完成的。也许他们甚至有一台装满贴纸的笔记本电脑和一件奇怪的 T 恤，在不同 session 的舞台上大谈特谈(并在业余时间制作其中一个“如何克服冒名顶替综合症”-YT 的视频(我不是在开玩笑) ..))。这些是人们无法跳出框框思考的 - 这是框框之外的改进，因此上述内容可以从一个框架，标准，原则，方法等中随意运行。 一切都取决于今年的时尚和什么可能是明年的时尚。
我不再喜欢那种浅薄的东西了，所以也许你得到的这个答案比你想要的多一点，但我已经完成了这种心态，你会在这里和其他地方遇到大多数人。 Web 开发“主要是一个已解决的问题”是无关紧要的，它不会让你和我成为优秀的程序员或 Web 开发人员，它不会改善任何事情。因此，我告诉你:做你想做的，让它发挥作用，了解它为什么有效，最终为什么不这样做。