изменить размер iframe (appetize.io) при изменении содержимого (междоменный) - PullRequest
Новая
       15

изменить размер iframe (appetize.io) при изменении содержимого (междоменный)

0 голосов
/ 04 октября 2018

Я пытаюсь автоматически изменить размер фрейма, который встраивает содержимое другого веб-сайта.Я пока не смог найти решение, поэтому мне нужен ваш опыт!

Проблема: я встраиваю контент мобильного дисплея (appetize.io) в iframe на своем сайте.У меня есть кнопки для поворота и изменения размера мобильного телефона.Но когда я это делаю, размер iframe не изменяется соответственно.В результате отображение мобильного телефона обрезается.Я хотел бы автоматически изменить размер iframe.

HTML: 

Device orientation: <button onclick="rotateLeft()">rotate left</button>
<button onclick="rotateRight()">rotate right</button><br/>
Device size:  <button onclick="setScale(10)">small</button> <button onclick="setScale(75)">normal</button>
<button onclick="setScale(100)">big</button>
<br/>
<iframe id="iframeid" scrolling="no" src="https://appetize.io/embed/demo_phq04c56jnvrkg0bn9w5ep4m9r?device=iphone8&orientation=portrait&scale=75&xdocMsg=true&deviceColor=white&debug=true&screenOnly=false"></iframe>

Для javascript и css см. Непосредственно на скрипке: http://jsfiddle.net/f5u9mh8s/

Попробуйте нажать на кнопки изменения размера и поворота, и вы увидите ...

Спасибо за помощь!

1 Ответ

0 голосов
/ 04 октября 2018

Чистое и простое решение существует, потому что вы используете Appetize, у которого есть API, доступный для этой цели.Если бы в iframe был другой сайт без API, сообщающий об ориентации устройства, решение стало бы менее надежным.

После того, как вы запустили сеанс Appetize в iframe, вы можете получать сообщения через API Appetize. Appetize docs указывает, что сообщение orientationChanged будет отправлено родителю при повороте устройства.Они услужливо предоставляют скрипку , в которой вы можете проверить это.Откройте консоль браузера, и после нажатия кнопки «Нажать для воспроизведения» при повороте устройства с помощью кнопок поворота вправо или влево на консоли отобразится сообщение о том, является ли устройство книжным или альбомным.

Это означает, что вы можете прослушивать сообщения из iframe, а когда вы получаете сообщение orientationChanged, вы можете соответствующим образом изменить его размер.

Например (это просто адаптация кода из скрипты аппетита):

var iframe = document.getElementById('iframeid');

var messageEventHandler = function(event){
    if(event.data && event.data.type == 'orientationChanged'){
        if (event.data.data == 'landscape') {
            iframe.height = '416px';
            iframe.width = '870px';
        } else if (event.data.data == 'portrait') {
            iframe.height = '870px';
            iframe.width = '416px';
        }
    }
};

window.addEventListener('message', messageEventHandler, false);
...