Как показать только определенную область (элемент) в iframe?
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 страницы своего же сайта.
На этом все, и до новых встреч!
