Javascript 创建一行代码和脚本，从另一个站点（如twitter、analytics等）回调表中的数据库信息

我对谷歌分析和twitter小部件的工作方式很感兴趣

例如在twitter上：

<a class="twitter-timeline" href="https://twitter.com/user" data-widget-id="user-id-in-numbers">Tweets by @user</a>
<script>!function(d,s,id){
        var js,
        fjs = d.getElementsByTagName(s)[0],
        p=/^http:/.test(d.location)?'http':'https';

        if(!d.getElementById(id)){
            js=d.createElement(s);
            js.id=id;
            js.src=p+"://platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
        }

    }(document,"script","twitter-wjs");</script>

!功能（d、s、id）{
var js，
fjs=d.getElementsByTagName[0]，
p=/^http:/.test（d.location）？'http'：'https'；
如果（！d.getElementById（id））{
js=d.createElement；
js.id=id；
js.src=p+“：//platform.twitter.com/widgets.js”；
fjs.parentNode.insertBefore（js，fjs）；
}
}（文件，“脚本”、“推特wjs”）；

所以本质上这行文字放在一个与twitter无关的网站的一个页面上

然后，它调用了一些时髦的长javascript，这些javascript被缩小了，很难理解（因为即使在未缩小的情况下，它们都是字母和卷积），不知何故，它与api联系，获取信息，创建一个用css预先设计的表，并将其放在原始网站上

简言之，我想构建一个API，就像它一样，我将信息从数据库传递到一个布局漂亮的网站

问题是——这叫什么？它肯定不是RESTful API？这些看起来不同，并且有点URL驱动，除非它在javascript中调用restful URL或其他东西

基本上，我很想学习和解决它，但我想不出在谷歌上查询什么可以学习，找一个教程，因为我不知道这叫什么。除了很多科技界的“大人物”使用它并取得惊人的效果

---

谢谢

我不相信这些东西有一个合适的名字，但是类似的东西叫做小部件。至于这些东西是如何工作的，基本上，它创建了一个新的脚本标记，将

src

设置为在添加代码的页面上运行的JavaScript文件的URL，通常创建一组新的元素或iframe。脚本之所以能够做到这一点，是因为外部加载的JavaScript文件在站点的安全上下文中运行，然后链接到它们，因此用户必须信任脚本的主机不会提供恶意代码。下面是对Twitter代码工作原理的解释

基本上，它创建以下脚本标记并将其添加到DOM中，就在页面上第一个脚本标记之前（如果使用HTTPS，则src将

https://platform.twitter.com/widgets.js

）

应该注意的是，所有这些代码都可以简单地编写如下

<a class="twitter-timeline" href="https://twitter.com/user" data-widget-id="user-id-in-numbers">Tweets by @user</a>
<script id="twitter-wjs" src="//platform.twitter.com/widgets.js"></script>

---

如果您打算自己制作，我建议将此方法用于协议无关的脚本标记。它更干净、更快、更小，并且得到了很好的支持。

它只是一个javascript API。它之所以有效，是因为你的页面实际上将脚本从他们的站点加载到你的站点上，这允许他们将关于你的站点的数据传递到他们的站点，并在你的站点上运行一个脚本（由他们控制）来加载内容，等等。这也让他们能够控制加载内容的外观/感觉。

//Everything is wrapped in self-calling an anonymous function to prevent variable collision.
!function(d,s,id){
    var js,
    //Find the first script element in the DOM (s = "script")
    fjs = d.getElementsByTagName(s)[0],
    //Create a URL prefix, using http if document.location starts with "http" (d = document)
    p=/^http:/.test(d.location)?'http':'https';

    //If the script tag with the ID of "twitter-wjs" has not been added yet (id = "twitter-wjs")
    if(!d.getElementById(id)){
        //Create a new script tag (s = "script")
        js=d.createElement(s);
        //Set the id to "twitter-wjs"
        js.id=id;
        //Set the src to the URL to the external script using the prefix from above.
        js.src=p+"://platform.twitter.com/widgets.js";
        //Insert the new script tag before the first script in the DOM causing it to load the external JS file.
        fjs.parentNode.insertBefore(js,fjs);
    }
}(document,"script","twitter-wjs");//Call the function, with these arguments.

<a class="twitter-timeline" href="https://twitter.com/user" data-widget-id="user-id-in-numbers">Tweets by @user</a>
<script id="twitter-wjs" src="//platform.twitter.com/widgets.js"></script>