Question

我试图在聚合物元素中实现twitter嵌入式时间轴。但是有一个问题：twitter的小部件.js脚本无法获取锚元素，它位于阴影dom内。为了解决这个问题，我覆盖了一些文档元素的方法，并在widgets.js完成执行后，恢复了文档的标准方法。它有效，但似乎非常不安全。有人可以有更好的解决方案吗？

Answer 1

在尝试了类似的技巧之后，我发现答案是微不足道的！

查看Twitter文档（https://dev.twitter.com/web/javascript/initialization），我发现你可以告诉它在任何给定点寻找动态创建的小部件，从给定节点向下遍历。

这意味着您只需将其插入Polymer ready：

...
  <template>

    <a class="twitter-timeline" height="500" href="https://twitter.com/joaomgvieira">Tweets by joaomgvieira</a>

  </template>

  <script>window.twttr = (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
      t = window.twttr || {};
    if (d.getElementById(id)) return t;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);

    t._e = [];
    t.ready = function(f) {
      t._e.push(f);
    };

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

  <script>
    Polymer({

      ready: function () {
        twttr.ready(function () {
          twttr.widgets.load(this);
        }.bind(this));
      }

    });
  </script>
...

为了使其可重复使用，我创建了https://github.com/joaovieira/twitter-widgets。

这应该很容易实现，所以你可以像以前一样使用你的嵌入。

Answer 2

我尝试使用Twitter上的widget.js库创建一个Polymer组件：https://github.com/LasaleFamine/polymer-twitter-timeline

我正在使用我的另一个库来加载库：https://github.com/LasaleFamine/polymer-lib-loader

您可以轻松查看两者的源代码。

我在我的一些项目中使用了这个元素，它的工作非常好。我希望可能有用，也欢迎PR！

Twitter内嵌聚合物元素的时间线

2 个答案: