Как вставить страницу с другого сайта в свой, изменив её масштаб

Эта статья рассказывает о том, как была разрешена вот такая ситуация

Есть страница site1.ru/page1.aspx, в которой осуществляются вычисленияЯ хочу вставить её в запись wordpress, расположенного по адресу site2.ru.

Пробую iframe, но страница, которую нужно вставить, значительно больше области, в которую её вставляю (примерно в 2 раза) — поэтому во фрейме отображается частично. Инструментов масштабирования у iframe нет.

Попробовал выполнить масштабирование вот так:

<div  style='transform: scale(0.5)'>
<iframe src=site1.ru/page1.aspx>
</iframe> 
</div>

Пробовал я и вот такой вариант: поставить

zoom: 0.5;

но почему-то не сработало. Уже не помню, почему.

Так или иначе, масштабирование с помощью transform: scale уменьшило страницу донор до необходимого размера, но почему-то над и под контентом образовалась куча свободного места. Есть ощущение, что высота страницы осталась прежней, а контент уменьшился в два раза и отцентровался.

Следующее, что я сделал, это попробовал переместить блок

<div></div>

наверх с помощью абсолютного позиционирования

position:absolute;top:-4200;

Это обеспечило перемещение блока div к верху экрана, но под ним всё равно осталась куча места.

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

transform-origin 0 0;

Виталий Емельянцев:

это задает центр, вокруг которого будет объект вращаться-масштабироваться
ставим 0 0 - то есть в левый верхний угол
и потом когда сужаем - он сужается не от своего центра,
оставляя огромный отступ от верха-лева

И вот теперь из вот этого состояния:

<div style='transform: scale(0.5); position:absolute;top:-4200;'>

был получен вот такой вариант:

<div style='transform-origin: 0 0; transform: scale(0.5);'>

Теперь страница (с фреймом) стала находиться в левом верхнем углу, как и положено

Но гигантское расстояние под фреймом всё равно осталось.

Виталий Емельянцев:

абсолютно логично
контент масштабировался, а само поле нет
потому что это не реальное масштабирование, это transform
оно не работает в старых версиях браузеров, например
можно задать margin-bottom: -5000px;

Итогом стала вот такая запись, позволившая вставить в фрейм контент с маштабированием, подогнать его под ту запись wordpress, которая требовалась:

<div style='transform-origin: 0 0; transform: scale(0.5); margin-bottom:-5000px;'><iframe src='http://site1.ru/page1.aspx' frameborder='0' scrolling='no' width='1400px' height='17700px'>
    Your browser does not support iframes.
</iframe> 
</div>

Надеюсь, данная статья окажется вам полезной, если вы пытаетесь вставить фрейм в свой сайт. По крайней мере, я убил на эти попытки 1,5 рабочих дня. )) И, думаю, если бы не помощь Виталия — вряд ли бы сам оперативно дошёл до мысли, как это сделать максимально просто.

Поэтому я откровенно советую обратиться к нему за профессиональной помощью в вопросах создания сайтов, лендингов, лидогенерации. Уверен, это сотрудничество будет не только плодотворным, но и приятным, так как Виталий — ещё и очень открытый и приятный человек )

Ссылочка на него: Виталий Емельянцев, группа в контакте: Технологические лендинги и продающие сайты. Ну а о его интересах и стремлениях можно прочитать в его паблике: Марафон с нуля до миллиарда. Виталий Гамбáла. Удастся ли?

На этом желаю удачи. С уважением, Александр Крылов.

p.s. В помощью индексации гуглу и яндексу: собственно, вот эта штука —

transform: scale

— позволяет подстроить размер страницы под разрешение экрана монитора, масштабировать страницу при изменении разрешения, менять ширину сайта, проводить адаптацию блочных элементов страницы html, пропорционально их уменьшая или увеличивая. Ну а для меня она позволила уменьшить содержимое (контент) iframe.

Как вставить страницу с другого сайта в свой, изменив её масштаб: 8 комментариев

  1. osvita.eu

    Спасибо!!! Огромное просто спасибо!!!

    Вот еще найду как скрыть сам код страницы…

  2. Михаил

    Добрый день. Подскажите, пожалуйста как подогнать код яндекс денег под ширину мобильной версии сайта (сделать его уже)

    В мобильной версии сайта объект не масштабируется, часть его просто обрезана по ширине. Изменение параметра width не приводит ни к чему, кроме его образания.

    1. Александр Крылов Автор записи

      Здравствуйте, Михаил. Возможно, есть смысл попробовать сделать для этого кода обёртку с помощью Bootstrap?

      Эта штука делает страницы и части кода подстраивающимися под определённые параметры экрана, то есть делает их адаптивными.

      На сайте кодебра можно найти коротенький курс по BS. )

      https://codebra.ru/guide/10161

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *