Категории блога
Чеклист по оптимизации сайта
Бесплатный чек-лист
Получить
Но вам требуется продвижение сайта или создание сайта-лидера, идеального для SEO? Тогда вы можете оставить заявку на продвижение или заявку на создание сайта. Если вы собираетесь продвигать сайт самостоятельно — продолжайте чтение!
Тег «Iframe» создает плавающий фрейм, находящийся внутри обычного документа и позволяет загружать в область заданных размеров любые другие элементы.
Например, с помощью этого контейнера можно поместить к себе на ресурс часть другого сайта. Конечно, у всех разные задачи, но одному пользователю необходимо было поместить на портале калькулятор из другого сайта, но найти решение вопроса не так уж и легко — большая часть информации из интернета устарела и популярные инструкции не работают. Однако мы нашли целых 5 рабочих способов и проверили их лично.
Прежде чем инициировать сам процесс разберемся как вообще происходит операция по отображению необходимой рабочей области. Один из простейших вариантов вот:
В конструкции мы видим всё необходимое, начиная со ссылки на сайт, параметров высоты и ширины окна отображения и специальное сообщение для обозревателей без поддержки тега .
Для начала указываем ссылку на сайт:
https://seozp.net/#element
В данном случае значение «ID» обозначает уникальный идентификатор встраиваемого элемента, а атрибут «scrolling=»no»» отключает скроллинг окна.
Полный вариант выглядит вот так:
<iframe src=»https://seozp.net» width=»500″ height=»350″>Ваш браузер не поддерживает iframe!</iframe>
В конечном счете определяем ширину и высоту окна, дабы убрать лишние элементы.
<iframe src=»https://seozp.net/#element» width=»500″ height=»350″ scrolling=»no»>Ваш браузер не поддерживает iframe!</iframe>
Также простой, но более трудоемкий способ под номером «2» не займет много времени, а всё что вам нужно, это продублировать страницу с необходимым элементом и обрезать лишнее. Конечный вариант вы просто добавляете на сайт по указанному выше принципу, за исключением атрибута «scrolling=»no»» — прокрутку убирать ненужно, ведь скроллить будет особо нечего.
В данном случае мы не будем применять тег «Iframe», но всё же конструкция ниже позволит добавить любой элемент в указанное место:
<div id=»result»></div> <script> $(function() { $(«#result»).load(«https://seozp.net #element»); }); </script>
«#result» — идентификатор элемента, а его блок грузится в «#element». Есть и небольшой минус — отсутствие родного оформления.
Этот способ позволяет отобразить элемент в отдельном окне, и Iframe выглядит так:
<div class=»iframe_block»> <iframe src=»https://seozp.net/» class=»iframe_class» scrolling=»no»>Ваш браузер не поддерживает iframe!</iframe> </div>
Также следует применить стили для отображения:
<style> .iframe_block { overflow: hidden; width: 400px; /* Ширина окна */ height: 300px; /* Высота окна */ } .iframe_class { border: 0px; margin-left: -200px; /* Положение по горизонтали */ margin-top: -33px; /* Положение по вертикали */ width: 1000px; height: 1000px; } </style>
Разберем значения: В «.iframe_block» задаются параметры положения окна (ширина и высота), а в «.iframe_class» находятся стили фрейма.
Один из самых не популярных способов позволяет встроить во фрейм страницы со своего сайта при использовании JS:
<iframe id=»iframe_id» src=»https://seozp.net» width=»500″ height=»350″>Ваш браузер не поддерживает iframe!</iframe> <script> var get_iframe = document.getElementById(«iframe_id»); get_iframe.onload = function() { get_iframe.contentWindow.scrollTo(20, 500); }; </script>
Значение «20,500» — необходимый отступ в px слева и сверху. Помните, в данном случае вариант применим только в процессе встраивания именно своих страниц.