August 23, 2022

Встраиваем любой сайт в таплинк

Видео: https://youtu.be/o8aFDA_MNmo

Благодаря тегу iframe можно встроить в свой таплинк любой сторонний сайт. Например, вставив в html-блок код

 <iframe src="https://www.cdek.ru/ru/tracking" width="100%" height="350" align="left">
    Ваш браузер не поддерживает плавающие фреймы!
 </iframe>

Мы можем встроить страничку сдека

У этого способа есть минус, из-за которого фреймы в целом редко используются в 2022 году: по сути вы заставите каждого зашедшего на ваш таплинк грузить таплинк + сайт СДЕКа

Есть альтернативный вариант, генерировать встройку по нажатию кнопки.

Для стандартной кнопки

1. В кнопку вставьте код. Если хотите вставить не СДЕК, вместо сайта сдека в src поменяйте на свой сайт

javascript: document.querySelector('.sdek').innerHTML ='<iframe src="https://www.cdek.ru/ru/tracking" width="100%" height="350" align="left">     Ваш браузер не поддерживает плавающие фреймы!  </iframe>'

2. Вставьте хтмл-блок с кодом

<script>
 document.addEventListener('DOMContentLoaded', () => {

 Array.from(document.querySelectorAll('.block-link a')).map((jscheck) => {
 	if (jscheck.href.indexOf('iframe')>-1) {
 		
jscheck.setAttribute('onclick', jscheck.href)	
jscheck.setAttribute('href', '#')	
 	}
 })
});
</script>

Без него на ПК кнопка забаговывается

3. Вставьте код, в местоположение которого будет вставляться встроенная страница

<div class ="sdek"></div>

Если нужно сделать картинку-превью, то с кодом картинки

<div class ="sdek"><img src="https://taplink.st/p/b/b/c/8/47004474.jpg?0"></div>

Для HTML-кнопок

В код кнопки добавьте атрибут

 onclick="createFrame()"

Также добавьте скрипт

<script>
function createFrame() {
document.querySelector('.sdek').innerHTML ='<iframe src="https://www.cdek.ru/ru/tracking" width="100%" height="350" align="left">     Ваш браузер не поддерживает плавающие фреймы!  </iframe>'
}
</script>

Вставьте код, в местоположение которого будет вставляться встроенная страница

<div class ="sdek"></div>

Если нужно сделать картинку-превью, то с кодом картинки

<div class ="sdek"><img src="https://taplink.st/p/b/b/c/8/47004474.jpg?0"></div>