单击加载时的外部 Javascript，然后使用其 API答案

【问题标题】：External Javascript on click loading then using its API单击加载时的外部 Javascript，然后使用其 API
【发布时间】：2017-09-14 17:18:36
【问题描述】：

因此一直在寻找具有 Windows 应用程序的良好聊天程序。发现 Tawk 我的应用程序很大，所以我只想在有人真的想和我聊天时才加载它。

问题是一旦你点击我的聊天按钮，聊天框就处于最小化状态。我希望小部件在加载后最大化。他们有一个api 可以最大化。

Tawk_API.onLoad = function(){
    Tawk_API.maximize();
};

不幸的是，这仅在程序完全加载时有效。

我尝试了一个查找类的计时器函数，但他们在每次加载时都会更改类名class="KSKLwOL-1492537819846"。

希望可能有另一种方法可以知道程序何时加载然后最大化。

$('.chat').on('click', function (e) {
    $('.chat').hide();
    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/58f11df330ab263079b5fde1/default';
        s1.charset = 'UTF-8';
        s1.setAttribute('crossorigin', '*');
        s0.parentNode.insertBefore(s1, s0);
        document.body.appendChild(s0);
    })();
});

如果你想了解我的意思，我的site 上会加载聊天程序。

谢谢大家。

【问题讨论】：

我认为这可以通过 promises 或 async-await 来完成。我可能会尝试，因为我同意这个聊天应用程序太大了。

标签： javascript tawk.to

【解决方案1】：

一种方法是使用默认加载 API 和 hide 小部件

Tawk_API.onLoad = function(){
  Tawk_API.hideWidget();
};

然后点击按钮

$('.chat').on('click', function (e) {
$('.chat').hide();
Tawk_API.showWidget();

更新：

您当前正在通过您的chat button 点击加载Tawk api。我建议您按照Tawk 的建议将其加载到您的页面上。将您的脚本放在</body> 标记之前。

这将为您省去计时器或等待 API 加载的麻烦。结果，当您 DOM 准备好（完全加载）时，您将拥有 Tawk api 对象

HTML

<body>
    <! -- move your code given by Tawk here -->
</body>

Javascript

$(document).ready(function(){
    if (Tawk_API) {
     Tawk_API.onLoad = function() {
       Tawk_API.hideWidget();
     };
     $('.chat-button').on('click', function(){
       $('.chat-button').hide();
       Tawk_API.showWidget();
       Tawk_API.maximize();
     });
    }
 });

不过，如果这无法理解，这里是我想说的代码笔演示。 Check this link

【讨论】：

我首先尝试了您的解决方案，小部件加载需要时间，因此无法正常工作，未定义 Tawk_API。 :( - 我的意思是我希望它最大化，编辑我的帖子。
我认为我们不在同一页面上。让我编辑我的答案
我知道他们想让我怎么做，但这不是应该怎么做的。从站点速度/SEO/UX 的角度来看事情。我不想加载比我的整个网站都大的繁重的聊天小部件，甚至可能不会被使用。我的问题是如何判断小部件是否已加载然后调用该函数。不过，感谢您的时间。

【解决方案2】：

这将确保小部件在加载时最小化，注意 setTimeout 对于实现这一点很重要。坚持使用 API 总是好的。

<script type="text/javascript">
  var Tawk_API = Tawk_API || {};
  var s1 = document.createElement("script"),
    s0 = document.getElementsByTagName("script")[0];
    s1.async = true;
    s1.src = 'https://embed.tawk.to/5b161b708859f57bdc7bd84d/default';
    s1.charset = 'UTF-8';
    s1.setAttribute('crossorigin', '*');
    s0.parentNode.insertBefore(s1, s0);

//here's all you need
Tawk_API.onLoad = function() {
setTimeout(function() {
      Tawk_API.minimize();
    }, 1);
};
</script>

【讨论】：