iframe, если вы еще не в курсе, позволяет встроить на вашем сайте другой сайт в специальном окне.

При различных поставленных задачах вам может потребоваться внедрение к себе не целого сайта, а, например, только определенной его области, как это было у меня. Мне нужно было «вырвать» у партнерского сайта калькулятор и разместить его на сайте клиента. Почитав информацию в Интернете на этот счет, я обнаружил, что большая ее часть устарела и попросту не работает. Я же в этой статье покажу вам пять рабочих способов, которые проверил лично.

Прежде чем начать рассмотрение вариантов определения отображения рабочей области, нужно понять, как вообще работает встраивание сайта через iframe.

Самый простой вариант – это:

Здесь указана ссылка на сайт, ширина и высота окна, а также сообщение для браузеров, не поддерживающих фреймы.

И на примере такой конструкции перейдем к рассмотрению выделений нужной области встраиваемого сайта.

Первый вариант

Этот вариант, наверное, самый простой. Все, что вам нужно сделать – это указать ссылку на сайт, типа:

https://poboq.ru/#element

Где «#element» – это ID нужного вам элемента на странице (уникальное значение), а также добавить атрибут «scrolling="no"» к тегу iframe. Этот атрибут убирает всевозможные прокрутки встроенного окна.

Итоговый вариант получается таким:

Все, что вам остается – это задать окну нужную ширину и высоту, дабы убрать лишние элементы с экрана клиента.

Второй вариант

Этот вариант так же прост, но немного «ленив», на мой взгляд. Для его реализации вам необходим доступ к встраиваемому сайту, а именно: вам необходимо продублировать страницу с желаемым элементом (дубль нужен для того, чтобы на рабочем сайте ничего не испортить) и убрать все, кроме этого элемента.

А дальше вы встраиваете эту страницу по принципу, приведенному в самом начале статьи. Убирать прокрутку здесь не обязательно, так как кроме самого элемента на странице больше ничего не будет. Вам остается лишь задать нужные размеры фрейм-окна.

Третий вариант

Здесь на самом деле не используется iframe. Но, не смотря на это, вы можете загрузить нужный вам элемент с определенного сайта по такому принципу:

<div id="result"></div>