如何将widget添加(嵌入)到其他网站，如tawk.to、disqus等？

Question

我正在尝试制作一个小工具，我可以通过代码嵌入添加到另一个网站，就像tawk.to一样。

我试过在嵌入中使用iframe和object，但由于某些原因，速度很慢。作为一个页面，它获取图像的速度很快，但当我嵌入它时，它的速度很慢。我还听说这不是最好的做法。

所以我搜索了其他网站正在做的事情，我发现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

使用iframe本身并不慢，但是，如果您直接插入iframe，那么它将与页面的其余部分一起内联加载。Tawk.to使用的方法是：

1. 简单的javascript (正如您已经粘贴的)，它只是在页面中创建第二个脚本元素，显式地将其设置为async，然后将其添加到DOM -这将触发脚本加载。

1. 此脚本随后将调用Tawk服务器，并返回更完整的javascript，其中包含服务器的完整代码，但不会减慢页面加载速度。

1. 在Tawk.to的情况下，他们确实使用iframe来显示他们的聊天小部件-这通常是一种确保没有样式冲突的直接方法，或者如果想要直接加载远程页面。

我用这种方式创建了小部件，也用直接向DOM添加元素的方式创建了小部件。这里的关键部分是js链接-第一个脚本除了构造第二个脚本之外什么也不做，并且不会影响页面加载。

将此应用到您的案例中，您可以：

1. 使用类似的JS链接来加载主JS脚本

1. 让主JS脚本添加一个隐藏的iframe，它将加载您已有的页面。

1. 向DOM添加一个按钮元素，用于切换您添加的iframe的可见性。