Как показать только определенную область (элемент) в iframe?

Тег «Iframe» создает плавающий фрейм, находящийся внутри обычного документа и позволяет загружать в область заданных размеров любые другие элементы.

Например, с помощью этого контейнера можно поместить к себе на ресурс часть другого сайта. Конечно, у всех разные задачи, но одному пользователю необходимо было поместить на портале калькулятор из другого сайта, но найти решение вопроса не так уж и легко — большая часть информации из интернета устарела и популярные инструкции не работают. Однако мы нашли целых 5 рабочих способов и проверили их лично.

Прежде чем инициировать сам процесс разберемся как вообще происходит операция по отображению необходимой рабочей области. Один из простейших вариантов вот:

В конструкции мы видим всё необходимое, начиная со ссылки на сайт, параметров высоты и ширины окна отображения и специальное сообщение для обозревателей без поддержки тега .

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

Для начала указываем ссылку на сайт:

В данном случае значение «ID» обозначает уникальный идентификатор встраиваемого элемента, а атрибут «scrolling=»no»» отключает скроллинг окна.

Полный вариант выглядит вот так:

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

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

Также простой, но более трудоемкий способ под номером «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 слева и сверху. Помните, в данном случае вариант применим только в процессе встраивания именно своих страниц.