Google Plus Button and Polymer

Question

Я работаю над применением Polymer, и у меня возникли проблемы с добавлением кнопки Google Plus (+1) на страницу. Кажется, javascript для создания кнопки не совместим с теневым DOM. Я пытаюсь добавить этот элемент глубоко внутри нескольких теневых DOM, поскольку это большое приложение.

Используя обычный метод добавления к странице кнопки просто не делает ничего

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

Этот, и любой другой метод, где скрипт auomatically пытается найти элемент ничего не делать. Это связано с тем, что селектор запросов, используемый скриптом, не смотрит в теневую 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, но эти элементы не работают, если они уже находятся внутри тени.

В моем случае у меня есть диалоговое диалоговое окно «share», в которое я хочу поместить эти кнопки, а диалоговое окно с бумагой помещает все в собственное теневое хранилище. Поэтому я не могу исключить теневой дом из приложения.

Любая помощь здесь будет значительно apreciated

Answer 1

Хитрость, кажется, с этим.асинхронной(), см следующий код для примера:

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); 
     }