Артём Мáлков

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

24 авг3 коммАртём Мáлков

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

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

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

<iframe src="https://www.pandoge.com" width="500" height="350">Ваш браузер не поддерживает iframe!</iframe>

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

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

Первый вариант показа определенной области сайта в iframe

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

https://www.pandoge.com/#element

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

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

<iframe src="https://www.pandoge.com/#element" width="500" height="350" scrolling="no">Ваш браузер не поддерживает iframe!</iframe>

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

Второй вариант показа определенной области сайта в iframe

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

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

Третий вариант показа определенной области сайта в iframe

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

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

<script>

	$(function() {

		$("#result").load("https://www.pandoge.com #element");

	}); 

</script>

Где «#result» – это ID элемента, куда нужно загрузить блок с ID «#element».

Главные минусы здесь – это отсутствие оформления подгружаемого элемента и ограничение на получение данных. Более подробно об этом способе написано здесь.

Четвертый вариант показа определенной области сайта в iframe

Вот мы и подошли к самому главному – это рабочий вариант показа определенной области непосредственно в iframe-окне. iframe в таком случае должен выглядеть примерно так:

<div class="iframe_block">

	<iframe src="https://www.pandoge.com/" 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, а «.iframe_class» – стили положения фрейма соответственно. Именно здесь вы настраиваете показ определенной области на встраиваемом сайте.

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

Пятый вариант показа определенной области сайта в iframe

Еще один вариант, наверное, не самый популярный – это встраивание в iframe страницы своего сайта. В таком случае с помощью JavaScript можно прокрутить страницу до заданных координат.

Рабочий пример:

<iframe id="iframe_id" src="https://www.pandoge.com" 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» – это отступ в пикселях слева и сверху соответственно. Обратите внимание, что этот метод работает только в том случае, если вы встраиваете в iframe страницы своего же сайта.

На этом все, и до новых встреч!

Рекомендуем к просмотру
Как зациклить воспроизведение встроенного на сайт видео с YouTube
Статьи и советы
Останавливаем/запускаем видео с YouTube на вашем сайте на jQuery+JavaScript
Статьи и советы
Модуль статистики «LightStat» 1.0 для DLE
Модули и скрипты
3
комментария
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 0
    1
      •  Пользователь
    23 янв в 09:41

    Здравствуйте!

    А можно поподробней про Где «#element» – это ID нужного вам элемента на странице (уникальное значение), А именно как правильно вставить этот ID непонятно нужно удалить #element и вместо него вставить?

    Вот к примеру на этой же странице https://www.pandoge.com/stati-i-sovety/kak-pokazat-tolko-opredelennuyu-oblast-element-v-iframe

    Я нашел элемент который мне нужен, как мне этот элемент встроить вместо #element.

    Нужны ли кавычки с одной и другой сторон?

    Хотелось бы узнать можно таким образом взять и перенести окно с переводом от Yandex к себе на страничку. Чтобы не переключаться каждый раз на вкладку.

    • 2
    1
      •  Пользователь
    10 дек в 10:23

    здравствуйте! не подскажете пожалуйста, а как узнать id элемента?

      • 1
      1083
        •  Команда Pandoge
      12 дек в 16:05

      артем гранжский, здравствуйте!

      Через исследование элемента (на нужном элементе правой кнопкой мыши - Исследовать или Посмотреть код). При этом, хочется упомянуть, что не у всех элементов может быть прописан ID.

Подняться наверх
Регистрация на сайте
Pandoge - уникальный проект, который собрал на своих страницах большой опыт многих людей в сфере сайтостроения.Присоединяйся и ты к сообществу, получай неограниченные знания и начинай творить свою мечту!Нажимая кнопку «Регистрация» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Логин
Пароль
Регистрация
Pandoge