Технология вставки сайта (или области сайта) в другой сайт всем известна.
Коротко: в коде страницы создается фрейм, в который вставляется ссылка на другой сайт. Используется команда iframe и на эту тему в интернете множество информации. Повторюсь и я:
<iframe src="адрес сайта" width="длина" height="высота" scrolling="auto"> </iframe>
Если вставляемый сайт по высоте окажется длиннее фрейма, то появится полоса вертикальной прокрутки. А что делать, если надо сделать "бесшовную" вставку сайта? Чтобы независимо от его длины - полоса прокрутки не появлялась.
Для чего спросите вы? А у меня возникла такая задача. Есть сайт на 1С-Битрикс. И надо было сделать быстро оригинальную страницу - сильно отличающуюся от шаблона сайта. Но при этом сохранив заголовок и подвал основного сайта. Для быстрого создания страницы лучше всего подошел сервис-конструктор Сайты24 внутри самого 1С-Битрикс.
Вот такой получился лендинг. И у него есть самостоятельный адрес: https://портал-для-родителей-алтайский-край.рф/lp/
Под каждый лендинг сервис создает папку на основном сайте.
Но задача состояла в том, чтобы эта страница появилась внутри основного сайта. Вот так:
Можно посмотреть по адресу: https://портал-для-родителей-алтайский-край.рф/kinoforum/
То есть лендинг становится контентом страницы основного сайта.
Но длина лендинга постоянно изменяется, когда изменяют его содержимое. А высота фрейма на основном сайте не меняется.
Решила я эту задачу с помощью написания скрипта, адаптирующего высоту фрейма под размер вставляемого лендинга.
Ниже напишу текст, чтобы было удобно скопировать.
<script>
var iframe = document.getElementById('websait');
if (iframe) {
function updateIframe() {
iframe.style.height = iframe.contentWindow.document.body.offsetHeight + 'px';
}
iframe.addEventListener('load', function() {
window.addEventListener('resize', function() {
updateIframe();
});
updateIframe();
});
}
</script>
<iframe id="websait" src="/lp/kinoforum_lp/" scrolling="no"></iframe>
Перед загрузкой страницы бывает совсем небольшая заминка на отработку скрипта. Зато никаких полос прокрутки и никаких пустых разрывов на сайте.
Спасибо. Если было полезно - буду рада лайку.