отключить зум внутри iframe на мобильном телефоне - PullRequest
Новая
       26

отключить зум внутри iframe на мобильном телефоне

0 голосов
/ 27 апреля 2019

У меня есть сайт с полноэкранным iframe.Чтобы быть точным в некоторых условиях, iframe может изменить размер на полный экран (под полным экраном я не имею в виду requestFullScreen, просто модальный div, который имеет фиксированную позицию и top, bottom. Left, right = 0) Источник iframe одинаков, about:blank поэтому у меня есть доступ к контексту хоста.

Я хочу отключить масштабирование внутри iframe, но оставляю опции масштабирования такими, как они есть на странице хоста для мобильных устройств.Согласно этому ответу, я могу использовать 

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>

К сожалению, приведенный выше тег работает на странице хоста, но не внутри iframe.Может быть, я могу preventDefault какие-то события масштабирования внутри iframe?

Я также пытался редактировать метатег во время выполнения, но он нарушает поведение по умолчанию:

На странице хоста: 

let viewPort = document.querySelector('meta[name=viewport]');
let content = '';
if (viewPort) {
  content = viewPort.getAttribute('content') || '';
}

// trigger this function from iframe when full screen mode changes:
window.fsChange = (isOpened) => {
    if (isOpened) {
      if (!viewPort) {
        viewPort = document.createElement('meta');
        viewPort.setAttribute('name', 'viewport');
        document.head.appendChild(viewPort);
      }
      viewPort.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
    } else {
      if (viewPort) {
        viewPort.setAttribute('content', content);
      }
    }

}

Когда я устанавливаю содержимое метатега и удаляю его после, настройки не будут откатываться.Например, я установил width=device-width и user-scalable=0, а затем установил для содержимого '' масштабирование будет отключено, а ширина страницы будет равна ширине устройства.

...