Question

我刚刚遇到一个很酷的网站tawk，它提供了一些非常棒的功能。 In this page，他们已经解释了一种通过添加几行JS代码来集成其小部件的简单方法：

<!--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/58d90960f97dd14875f5a534/default';
     s1.charset='UTF-8';
     s1.setAttribute('crossorigin','*');
     s0.parentNode.insertBefore(s1,s0);
   })();
 </script>
<!--End of Tawk.to Script-->

对于AngularJS或JavaScript，我googled也是如此，但没有得到任何东西来创建类似的可用性小部件。有人可以为同一个

提供任何好的实例/教程

Answer 1

让我们用最简单的方法制作一个非常简单的小部件，将它包含在你的页面中。

首先创建一个html文件：

<html>
<head>
    <title>Widget Demo</title>
</head>
<body>
    <h1>Widget Demo</h1>
    <p>A clock widget will be inserted next:</p>
    <script src="clock.js"></script>
    <p>And a new one here:</p>
    <script src="clock.js"></script>
</body>
</html>

我们将创建一个时钟小部件，其中包含它的方法是将<script src="clock.js"></script>添加到您希望它出现的位置。

现在让我们编写小部件代码部分，创建clock.js：

new class {

    constructor() {
        document.write("<div class='Clock'></div>");
        const clocks = document.querySelectorAll(".Clock");
        this.element = clocks[clocks.length - 1];

        this.element.style.width = "200px";
        this.element.style.lineHeight = "80px";
        this.element.style.textAlign = "center";
        this.element.style.fontFamily = "sans-serif";
        this.element.style.fontSize = "35px";
        this.element.style.background = "#ddd";
        this.element.style.borderRadius = "15px";

        this.draw();
        setInterval(this.draw.bind(this), 1000);
    }

    draw() {
        this.element.innerText = new Date().toLocaleTimeString()
    }

}

让我们按部分检查这部分：

new class {＆lt; - 每次执行clock.js时，都会创建以下类的新对象。

现在，我们需要为我们的小部件创建一个元素并将其放在页面中：

document.write("<div class='Clock'></div>");
const clocks = document.querySelectorAll(".Clock");
this.element = clocks[clocks.length - 1];

有多种方法可以做到这一点，我刚刚选择了最短的方法。因此，document.write将在当前正在执行的脚本标记之后插入html代码。所以，我插入将创建div元素的文本。为了能够选择它并继续使用Javascript，我添加了一个.Clock类，所以我可以使用querySelectorAll选择所有时钟。最后，我存储了最后一个，也就是我刚创建的那个作为我的新对象的元素。

这是该过程中唯一有点棘手的部分，除此之外，没有什么特别之处，但让我们继续检查：

    this.element.style.width = "200px";
    this.element.style.lineHeight = "80px";
    this.element.style.textAlign = "center";
    this.element.style.fontFamily = "sans-serif";
    this.element.style.fontSize = "35px";
    this.element.style.background = "#ddd";
    this.element.style.borderRadius = "15px";

只需设计元素样式。我们没有css文件或html文件，因此我们使用javascript创建所有内容。

    this.draw();
    setInterval(this.draw.bind(this), 1000);

我将首次调用绘图函数，然后每秒用当前时间更新时钟的文本：

draw () {
    this.element.innerText = new Date().toLocaleTimeString()
}

而且......那就是它！你不应该加载css文件，因为它们可能导致与加载它的页面发生css冲突，但是如果你觉得你真的需要加载css，你可以通过在文档中插入一个元素来实现它，并且它可以会加载。如果你想拥有多个javascript文件，你应该将它们捆绑到一个服务器端，但如果你真的需要在客户端进行，你可以像你发布的代码一样：创建一个脚本文件并将其添加到DOM中。还有其他方法，但这种方法最简单。如果你想从其他文件中包含html的某些部分，那么它也是可能的，但是再次更好地将所有内容嵌入到单个.js中，它将是紧凑且快速加载的。

Answer 2

旧版浏览器的clock.js版本：

if (!Clock) {
    function Clock() {
        document.write("<div class='Clock'></div>");
        const clocks = document.querySelectorAll(".Clock");
        this.element = clocks[clocks.length - 1];

        this.element.style.width = "200px";
        this.element.style.lineHeight = "80px";
        this.element.style.textAlign = "center";
        this.element.style.fontFamily = "sans-serif";
        this.element.style.fontSize = "35px";
        this.element.style.background = "#ddd";
        this.element.style.borderRadius = "15px";

        this.draw();
        setInterval(this.draw.bind(this), 1000);
    }
    Clock.prototype.draw = function () {
        this.element.innerText = new Date().toLocaleTimeString();
    }
}
new Clock();

在此处添加，而不是编辑上一个答案，因为我在尝试编辑时遇到错误。也许发帖太久了？

了解在AngularJS或JavaScript中创建窗口小部件的最佳方法

2 个答案: