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

Автор: | 22 октября, 2023

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

Есть страница 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='https://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.

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

  1. артур

    вечер в радость Александр
    а можно вставить страницу с другого сайта в свой, изменив цвет текста или кнопок?

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

      Вечер добрый)
      Вообще, да, но это будет значительно более трудоёмко.
      Здесь в статье — фрейм, не факт, что к нему хоть как-то нормально можно применить стили.
      Вариантов вижу 2:
      1) исходную страницу можно парсить и вставлять в свой сайт;
      2) попробовать применить к фрейму обработку яваскриптом или jQuery.
      Но над обоими вариантами нужно посидеть и подумать — может, проще забить на изменение оформления.

      Ответить
      1. артур

        ясн благодарю

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

          Всегда пожалуйста )

          Ответить
  2. Кирилл

    Благодарствую за полезный код, теперь всё умещается 🙂

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

      Всегда пожалуйста )

      Ответить
  3. Алекс

    Блин, мужик, дай Бог тебе здоровья!

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

      Большое спасибо! )

      Ответить
  4. Михаил

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

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

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

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

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

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

      https://codebra.ru/guide/10161

      Ответить
  5. osvita.eu

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

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

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

      Всегда пожалуйста )

      Ответить
  6. Мария

    Спасибо за статью! 😉

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

      Пожалуйста 🙂

      Ответить

Добавить комментарий для Александр Крылов Отменить ответ

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