Question

我正在处理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的信息时，它只是永远加载，并且对话框中的大部分界面都不起作用。

enter image description here

您在控制台中也出现错误

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

该行是

window.document.getElementById(a)

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

当我给他们提供他们调用渲染功能时他们需要触摸的唯一元素时，Google会这样做并从窗口文档中一直看起来很奇怪。

如果我将所有这些都放在一个单独的文档中并通过iframe加载（这是我为facebook创建的那个）我松散了功能，因为它试图在微小的iframe中打开内部对话框并且它＆＃39; s无法使用。

有没有人知道允许您在阴影中使用Google Plus按钮的解决方法，或者至少是强制Google plus按钮使用弹出窗口作为评论对话框的方式，如facebook按钮？

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

就我而言，我有一个＆＃34;分享＆＃34;我希望将这些按钮放入纸张对话框中，纸张对话框将所有内容放入其自身的影子dom中。所以我无法从应用程序中删除阴影dom。

这里的任何帮助都会非常难以理解

Answer 1

诀窍似乎与this.async（）有关，请参阅以下代码示例：

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

以下是相关部分：


    <polymer-element name="googleplus-badge" attributes="type href layout showphoto showcoverphoto showowners showtagline theme width">
        <template>
            <div id="gplusbadge"></div>
            <div id="gpluserrors"></div>
        </template>
        <script src="https://apis.google.com/js/platform.js" async defer></script>
        <script>
        Polymer({
        ...
        renderBadge: function() {

                var params = {
                        'class': 'g-page',
                        'href': this.href,
                        'layout': this.layout,
                        'showcoverphoto': this.showcoverphoto,
                        'width': this.width,
                        'theme': this.theme
                    };
                    gapi.page.render(this.$.gplusbadge, params);
                ...
        },

        ready: function() {

            this.async(this.renderBadge, null, 1000);
        }

Google Plus按钮和聚合物

1 个答案: