Google Plus 按钮和聚合物答案

【问题标题】：Google Plus Button and PolymerGoogle Plus 按钮和聚合物
【发布时间】：2015-01-28 23:25:00
【问题描述】：

我正在开发 Polymer 应用程序，但在向页面添加 Google Plus (+1) 按钮时遇到问题。似乎用于创建按钮的 javascript 与 shadow DOM 不兼容。我正在尝试将此元素添加到几个影子 DOM 的深处，因为这是一个大型应用程序。

使用正常的方法将按钮添加到页面中什么都不做

<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:plusone></g:plusone>

这以及脚本自动尝试查找元素的任何其他方法都不会执行任何操作。这是因为脚本使用的查询选择器不在影子 DOM 内。

现在显式渲染按钮可以工作了……有点

<script src="https://apis.google.com/js/platform.js">
         {parsetags: "explicit"}
</script>
<div id="gplus" class="g-plusone"></div>

然后在父元素的脚本中

gapi.plusone.render(this.$.gplus,{href : "THE URL"});

按钮正确显示，并且几乎可以正常工作。当您单击它时，它会添加 1 并打开内部对话框以添加评论。但是它坏了，对话框大小是错误的，当它尝试加载有关 url 的信息时，它只会永远加载，并且对话框中的大部分界面都不起作用。

控制台也报错

cb=gapi.loaded_0:91     Uncaught TypeError: Cannot read property 'src' of null

那行是

window.document.getElementById(a)

显然，这不适用于 Shadow DOM，因为窗口的文档将是 DOM 的顶层，它不会找到实际的元素。

奇怪的是，当我为他们提供调用渲染函数时他们唯一需要触摸的元素时，Google 会这样做并从窗口文档一直向上查找。

如果我将所有这些放在一个单独的文档中并通过 iframe 加载（这就是我为 facebook 所做的），我会失去功能，因为它试图打开小 iframe 内的内部对话框并且它无法使用。

有没有人知道一种解决方法，可以让您在阴影中使用 Google Plus 按钮，或者至少有一种方法可以强制 Google plus 按钮使用弹出窗口来显示评论对话框，就像 facebook 按钮一样？

我发现其他人为 Google Plus 按钮制作了一些不同的聚合物元素，但它们都没有模板，并且都动态添加元素，因此该元素没有阴影 dom，但如果它们这些元素不起作用已经在 shadow dom 中了。

就我而言，我有一个“共享”纸质对话框，我想将这些按钮放入其中，纸质对话框将所有内容都放在它自己的 shadow dom 中。所以我无法从应用程序中消除 shadow dom。

这里的任何帮助将不胜感激

【问题讨论】：

我遇到了同样的问题，并与您尝试了同样的事情，但没有成功。奇怪的是 Google 自己的项目相互干扰。

标签： javascript polymer google-plus-one shadow-dom

【解决方案1】：

诀窍似乎在于 this.async()，示例见以下代码：

https://github.com/kunalnagar/googleplus-badge/blob/master/googleplus-badge.html

以下是相关部分：

模板> 聚合物（{ ... 渲染徽章：函数（）{ 变量参数 = { 'class': 'g-page', “href”：this.href， “布局”：this.layout， 'showcoverphoto': this.showcoverphoto, “宽度”：this.width， “主题”：this.theme }; gapi.page.render(this.$.gplusbadge, params); ... }, 准备好：函数（）{ this.async(this.renderBadge, null, 1000); }

【讨论】：