了解使用AngularJS或JavaScript创建小部件的最佳方法_Javascript_Angularjs_Widget

了解使用AngularJS或JavaScript创建小部件的最佳方法

javascript angularjs

了解使用AngularJS或JavaScript创建小部件的最佳方法,javascript,angularjs,widget,Javascript,Angularjs,Widget,我刚刚看到一个很酷的网站，它提供了一些非常棒的功能，他们解释了通过添加几行JS代码来集成小部件的简单方法：  <script type="text/javascript"> var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date(); (function(){ var s1=document.createElement("scr

我刚刚看到一个很酷的网站，它提供了一些非常棒的功能，他们解释了通过添加几行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也有同样的想法，但没有得到任何东西来创建类似的可用性小部件。有没有人能为同样的内容提供一些好的实时示例/教程

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

首先创建一个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>

有多种方法可以做到这一点，我只是选择了最短的一个。因此，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函数，然后每秒使用当前时间更新时钟文本：

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

而且。。。就这样！您不应该加载css文件，因为它们可能会导致css与加载它的页面发生冲突，但是如果您觉得确实需要加载css，您可以使用javascript将一个元素插入到文档的页面中，然后它就会加载。如果您想拥有多个javascript文件，那么应该将它们捆绑到一个服务器端，但是如果您确实需要在客户端执行此操作，则可以按照发布的代码执行：创建一个脚本文件并将其添加到DOM中。还有其他方法，但这种方法是最简单的。如果您想包含来自其他文件的html的某些部分，也可以这样做，但最好将所有内容都嵌入到一个.js中，这样可以使加载变得紧凑和快速。

针对较旧浏览器的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();

添加到此处而不是编辑上一个答案，因为尝试编辑时出错。也许帖子太长了？

哦。。。我忘了提到你也可以使用iframe。如果没有iframe，您可以对小部件进行一些控制，比如在小部件上设置一些css边框，而iframe不是。。。可能还有更多的不同…u plz能提供一个有效的打捞器吗。clock.js的语法不正确。我已经把它上传到我自己的服务器上，我在这里复制/粘贴代码创建了文件：我已经试过了，它在最新的Chrome、Safari、Firefox和Opera上运行。如果在您使用的浏览器中失败，请告诉我它是哪一个，版本和OSThanks供您回复。我可以在浏览器中看到时钟，错误在Netbeans IDE intellisense中。现在我将忽略它。为什么要替换为s1.src='clock.js'；不起作用。在这种情况下，document.write无法正常工作。您需要使用一种方法来创建元素并将其附加到正常工作的DOM。正如我告诉你的，在我的示例中，我向你展示了尽可能简单的方法，但是如果你修改了它，我不确定你为什么要这样修改它，那么你可能需要做新的更改。我添加了第二个示例：这不使用document.write，所以它可以按照你的意愿工作。它不会在脚本的位置插入小部件，而是总是将小部件添加到文档正文的顶部哦，而且，所有内容都不需要是黑色或白色的。例如，您可以在告诉用户复制/粘贴的代码中添加一些代码，用于调整iframe的大小。

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

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();