javascript - Twitter 在 polymer 元素中嵌入时间轴

Question

我正在尝试在 polymer 元素内实现 Twitter 嵌入式时间轴。但是有一个问题:twitter 的 widgets.js 脚本无法获取位于 shadow dom 中的 anchor 元素。为了解决这个问题，我覆盖了文档元素的一些方法，并且在 widgets.js 完成执行后我恢复了文档的标准方法。它有效，但似乎很不安全。有人可以提供更好的解决方案吗？

Answer 1

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

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

这意味着您只需将其插入 Polymer 就绪:

...
  <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 .

这应该很容易达到目的，因此您可以像以前一样使用嵌入。