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

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

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

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

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

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

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

Также простой, но более трудоемкий способ под номером «2» не займет много времени, а всё что вам нужно, это продублировать страницу с необходимым элементом и обрезать лишнее. Конечный вариант вы просто добавляете на сайт по указанному выше принципу, за исключением атрибута «scrolling=»no»» — прокрутку убирать ненужно, ведь скроллить будет особо нечего.

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

В данном случае мы не будем применять тег «Iframe», но всё же конструкция ниже позволит добавить любой элемент в указанное место:
«#result» — идентификатор элемента, а его блок грузится в «#element». Есть и небольшой минус — отсутствие родного оформления.

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

Этот способ позволяет отобразить элемент в отдельном окне, и Iframe выглядит так:
Также следует применить стили для отображения:
Разберем значения: В «.iframe_block» задаются параметры положения окна (ширина и высота), а в «.iframe_class» находятся стили фрейма.

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

Один из самых не популярных способов позволяет встроить во фрейм страницы со своего сайта при использовании JS:
Значение «20,500» — необходимый отступ в px слева и сверху. Помните, в данном случае вариант применим только в процессе встраивания именно своих страниц.

Оцените статью
SEO
Добавить комментарий

Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности