Пример страницы источника:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
    <div class="header" style="height: 100px; background-color: green;"></div>

    <iframe src="http://www.wikipedia.com"
            style="height: 200px; width: 100%; border: none;"></iframe>

    <div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>

Проблема состоит в том, что height из 200px из встроенного стиля IFrames игнорируется в мобильном сафари:

enter image description here

Также я хотел бы динамически изменять высоту IFrame с помощью обычного JavaScript, который вообще не работает со следующим кодом:

document.getElementsByTagName('iframe')[0].style.height = "100px"

Значение стиля height корректно изменяется в соответствии с инструментами разработчика, но оно просто игнорируется, поскольку фактически отображаемая высота IFrame не изменяется.

Это только кажется проблемой в мобильном Safari и работает, как и ожидалось, в последних версиях настольных Safari, Firefox, Chrome, Androids WebView и т. Д.

Тестовая страница: http://devpublic.blob.core.windows.net/scriptstest/index.html

Ps.: Я проверил это на различных устройствах в стеке браузера и также сделал там скриншоты, так как у меня под рукой нет iDevice.

23
suamikim 16 Дек 2015 в 22:02

3 ответа

Лучший ответ

Это выглядит так: Как получить IFrame быть отзывчивым в iOS Safari?

У iFrames есть проблема только с iOS, поэтому вы должны адаптировать к нему свой iframe.

Вы можете поместить div, обертывающий iframe, установить css на iframe и, что сработало для меня, добавить: поставить атрибут scrolling = 'no'.

Желаю удачи.

16
Sensoray 10 Окт 2018 в 20:17

ПРОБЛЕМА:

У меня была такая же проблема. Изменение размера / стиля контейнера контейнера iframe и добавление scrolling = "no" в iframe у меня не сработало. Переполнение при прокрутке, как описывает Фрейя, тоже не вариант, потому что содержимое моего iframe необходимо изменять в зависимости от родительского контейнера. Вот как был структурирован мой оригинальный (не работающий, переполненный контейнер) код iframe:

<style>
    .iframe-wrapper {
        position: relative;
        height: 500px;
        width:   100%;
    }

    .iframe {
        display: block;
        position: absolute;
        top:    0;
        bottom: 0;
        left:   0;
        right:  0;
        width:  100%;
        height: 100%;
    }
</style>

<div class="iframe-wrapper">
    <iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>

РЕШЕНИЕ:

Этот супер простой маленький CSS-хак сделал свое дело:

<style>
    .iframe-wrapper {
        position: relative;
        height: 500px;
        width:   100%;
    }

    .iframe {
        display: block;
        position: absolute;
        top:    0;
        bottom: 0;
        left:   0;
        right:  0;
        width:  100px;
        min-width:  100%;
        height: 100px;
        min-height: 100%;
    }
</style>

<div class="iframe-wrapper">
    <iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>

Установите высоту / ширину iframe на небольшое случайное значение пикселя. Установите его min-height & min-width на то, что вы действительно хотите, чтобы высота / ширина была. Это полностью исправило проблему для меня.

0
AnnaFractuous 8 Авг 2017 в 21:22

У меня та же проблема. И после того, как попробовал все решения, которые я смог найти, я наконец нашел, как решить это.

Эта проблема вызвана iOS Safari, он автоматически увеличивает высоту iframe, чтобы вместить содержимое страницы внутри.

Если вы поместите атрибут scrolling = 'no' в iframe как <iframe scrolling='no' src='content.html'>, эта проблема может быть решена, но если iframe не сможет отобразить полное содержимое страницы, содержимое, которое превышает фрейм, будет обрезано.

Поэтому нам нужно поместить div, обертывающий iframe, и обработать в нем событие прокрутки.

<style>
.demo-iframe-holder {
  width: 500px;
  height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}
</style>

<html>
<body>
    <div class="demo-iframe-holder">
        <iframe src="content.html" />
    </div>
</body>
</html>

Ссылки:

https://davidwalsh.name/scroll-iframes-ios

Как заставить IFrame быть отзывчивым в iOS Safari?

Надеюсь, это поможет.

12
Freya Yu 8 Авг 2017 в 08:09