Авторизация через Telegram. Несколько виджетов на 1-й странице

180

20 февраля 2019, 13:50

С самой авторизацией проблем нет. А вот с размещением нескольких виджетов авторизации на 1-й страниц - есть.

body { 
display: flex; 
flex-direction: column; 
} 
.wrap { 
width: 300px; 
height: 100px; 
margin-bottom: 50px; 
border: 1px solid; 
}

  	<div class="wrap">TestSite  	 
  		<script async src="https://telegram.org/js/telegram-widget.js?4" data-telegram-login="TestRobot" data-size="medium" data-onauth="onTelegramAuth(user)" data-request-access="write"></script> 
  	</div> 
 
  	 <div class="wrap">TestSite 2 	 
  		<script async src="https://telegram.org/js/telegram-widget.js?4" data-telegram-login="TestRobot" data-size="medium" data-onauth="onTelegramAuth(user)" data-request-access="write"></script> 
  	</div>

Как видите, скрипт отработал только в 1 месте. Как установить виджет в разных местах страницы? Ссылка на виджет - https://core.telegram.org/widgets/login

Answer 1

Придумал вот такой костыль: Отслеживаю изменения DOM-дерева в целевом объекте (там добавляется iframe). Клонирую этот iframe и вставляю в любое место страницы

const target = document.getElementById('one'); 
const mutationConfig = { 
	childList: true, 
	subtree: true, 
	characterData: true, 
} 
 
const observer = new MutationObserver(function(mutations){ 
	  const elem = mutations[0].addedNodes[0] 
	  appendTG(elem) 
}); 
observer.observe(target, mutationConfig) 
 
function appendTG(elem){ 
const clone = elem.cloneNode(true) 
const next = document.getElementById('two'); 
next.appendChild(clone) 
}

body { 
display: flex; 
flex-direction: column; 
} 
.wrap { 
width: 300px; 
height: 100px; 
margin-bottom: 50px; 
border: 1px solid; 
}

  	<div id="one" class="wrap">Test 	 
  		<script defer src="https://telegram.org/js/telegram-widget.js?4" data-telegram-login="TestBot" data-size="medium" data-onauth="onTelegramAuth(user)" data-request-access="write"></script> 
  	</div> 
  	 <div id="two" class="wrap">Test 2 	 
 
  	</div>