Iframe В Ios (Ipad) Проблема Обрезки Контента

Iframe В Ios (Ipad) Проблема Обрезки Контента Ipad

Почему сдвигается содержимое iframe на ios?

Есть блок .item_right в нем iframe с видео из ютуба

.item_right {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2em 1em;
}
iframe {
object-fit: cover;
text-align: center;
-webkit-box-shadow: 0px 0px 21px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 21px -5px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 21px -5px rgba(0, 0, 0, 0.75);
}

содержимое iframe на айфоне сдвигается влево, подскажите как сделать, чтобы видео по центру располагалось.
Скрин прилагается, спасибо

5d4073ec733a1884284353.jpeg

Iframe в ios (ipad) проблема обрезки контента

Я ищу правильный способ убедиться, что динамически обнаруженное содержимое видно после прокрутки в iframe на ipad/iOS5.

Oh Iframes и iPad — какой чудесный старый хесут вы. Я знаю, что:

    iPad расширяет iframes до полной высоты содержимого внутри него (почти так же, как при использовании HTML5 seamless «, но не совсем так, поскольку он не наследует стили или события от родителя). Необычный, раздражающий многих, но правда.
    <iframe height="100%">, следовательно, бесполезен, так как он не зависит от его содержимого, а не от контейнера

    Мне нужно обернуть мой iframe в div-a la

    <div id="wrapper" style="-webkit-overflow-scrolling:touch;overflow:auto;">
    <iframe width="100%" height="100%" src="about"blank"></iframe>
    </div>

    а также ввести трюк , чтобы установить положение прокрутки фрейма (что, на мой взгляд, основано на трюках, упомянутых в this article)

Моя проблема заключается в том, что содержимое, динамически отображаемое внутри тела iframe (например, вкладки jquery, аккордеон и т.д.), может привести к тому, что браузер обрезает контент на уровне отображения страницы.

например. если мои «вкладки» больше всего подходят к видимому видовому экрану внутри iframe, и я выполняю прокрутку с двумя пальцами (или реализую прокрутку с одним пальцем), а затем после прокрутки этого содержимого некоторые из его содержимого, которые были ранее не нарисованный остается неиспользованным. При повторном нажатии на вторую вкладку/назад появляется содержимое, как если бы страница не выводила содержимое вне экрана. После этого, если я затем прокручу назад до верхней части страницы, содержимое не будет нарисовано для начала страницы (которая была ранее видна). Прокрутка страницы вверх и вниз несколько раз с помощью прокрутки с двумя пальцами устраняет проблему.

Я прочитал в этой статье, в котором говорилось, что проблема исправлена. Но он, похоже, не полностью исправлен; и по-прежнему не обойти эту проблему, поскольку, поскольку вы должны обернуть свой iframe в div и поместить полосы прокрутки в этот div, браузеры на рабочем столе могут показывать двойную полосу прокрутки в зависимости от того, как они интерпретируют overflow:auto.

p.s. Я использую HTML-страницу шаблона как внутри, так и снаружи iframe с правильными настройками мета-видовых экранов.

Iframes и safari на ipad, как пользователь может прокручивать содержимое?

Проблема

Я помогаю поддерживать большой, сложный, грязный старый сайт, в котором все (буквально) вложен в несколько уровней iframes-многие из которых динамически создаются и/или имеют динамический src. Это создает следующие проблемы:

  1. любые изменения в структуре HTML рискуют нарушить скрипты и таблицы стилей, которые не были затронуты в течение многих лет.
  2. поиск и исправление всех iframes и src документы вручную займет слишком много времени и усилий.

из решений, опубликованных до сих пор,этой это единственный, который я видел, что преодолевает вызов 1. К сожалению, он, похоже, не работает на некоторых iframes, и когда это происходит, прокрутка очень глючит (что, похоже, вызывает другие ошибки на странице, такие как невосприимчивые ссылки и элементы управления формой).

Решение

Если выше звучит что-нибудь вроде вашего ситуация, вы можете дать следующий сценарий попробовать. Он отказывается от собственной прокрутки и вместо этого делает все iframes перетаскиваемыми в пределах их видового экрана. Вам нужно только добавить его в документ, содержащий iframes верхнего уровня; он будет применять исправление по мере необходимости к ним и их потомкам.

вот работает скрипка* и вот код:

(function() {
  var mouse = false //Set mouse=true to enable mouse support
    , iOS = /iPad|iPhone|iPod/.test(navigator.platform);
  if(mouse || iOS) {
    (function() {
      var currentFrame
        , startEvent, moveEvent, endEvent
        , screenY, translateY, minY, maxY
        , matrixPrefix, matrixSuffix
        , matrixRegex = /(.*([.d-] , ?){5,13})([.d-] )(.*)/
        , min = Math.min, max = Math.max
        , topWin = window;
      if(!iOS) {
        startEvent = 'mousedown';
        moveEvent = 'mousemove';
        endEvent = 'mouseup';
      }
      else {
        startEvent = 'touchstart';
        moveEvent = 'touchmove';
        endEvent = 'touchend';
      }
      setInterval(scrollFix, 500);
      function scrollFix() {fixSubframes(topWin.frames);}
      function fixSubframes(wins) {for(var i = wins.length; i; addListeners(wins[--i]));}
      function addListeners(win) {
        try {
          var doc = win.document;
          if(!doc.draggableframe) {
            win.addEventListener('unload', resetFrame);
            doc.draggableframe = true;
            doc.addEventListener(startEvent, touchStart);
            doc.addEventListener(moveEvent, touchMove);
            doc.addEventListener(endEvent, touchEnd);
          }
          fixSubframes(win.frames);
        }
        catch(e) {}
      }
      function resetFrame(e) {
        var doc = e.target
          , win = doc.defaultView
          , iframe = win.frameElement
          , style = getComputedStyle(iframe).transform;
        if(iframe===currentFrame) currentFrame = null;
        win.removeEventListener('unload', resetFrame);
        doc.removeEventListener(startEvent, touchStart);
        doc.removeEventListener(moveEvent, touchMove);
        doc.removeEventListener(endEvent, touchEnd);
        if(style !== 'none') {
          style = style.replace(matrixRegex, '||').split('|');
          iframe.style.transform = style[0]   0   style[2];
        }
        else iframe.style.transform = null;
        iframe.style.WebkitClipPath = null;
        iframe.style.clipPath = null;
        delete doc.draggableiframe;
      }
      function touchStart(e) {
        var iframe, style, offset, coords
          , touch = e.touches ? e.touches[0] : e
          , elem = touch.target
          , tag = elem.tagName;
        currentFrame = null;
        if(tag==='TEXTAREA' || tag==='SELECT' || tag==='HTML') return;
        for(;elem.parentElement; elem = elem.parentElement) {
          if(elem.scrollHeight > elem.clientHeight) {
            style = getComputedStyle(elem).overflowY;
            if(style==='auto' || style==='scroll') return;
          }
        }
        elem = elem.ownerDocument.body;
        iframe = elem.ownerDocument.defaultView.frameElement;
        coords = getComputedViewportY(elem.clientHeight < iframe.clientHeight ? elem : iframe);
        if(coords.elemTop >= coords.top && coords.elemBottom <= coords.bottom) return;
        style = getComputedStyle(iframe).transform;
        if(style !== 'none') {
          style = style.replace(matrixRegex, '||').split('|');
          matrixPrefix = style[0];
          matrixSuffix = style[2];
          offset = parseFloat(style[1]);
        }
        else {
          matrixPrefix = 'matrix(1, 0, 0, 1, 0, ';
          matrixSuffix = ')';
          offset = 0;
        }
        translateY = offset;
        minY = min(0, offset - (coords.elemBottom - coords.bottom));
        maxY = max(0, offset   (coords.top - coords.elemTop));
        screenY = touch.screenY;
        currentFrame = iframe;
      }
      function touchMove(e) {
        var touch, style;
        if(currentFrame) {
          touch = e.touches ? e.touches[0] : e;
          style = min(maxY, max(minY, translateY   (touch.screenY - screenY)));
          if(style===translateY) return;
          e.preventDefault();
          currentFrame.contentWindow.getSelection().removeAllRanges();
          translateY = style;
          currentFrame.style.transform = matrixPrefix   style   matrixSuffix;
          style = 'inset('   (-style)   'px 0px '   style   'px 0px)';
          currentFrame.style.WebkitClipPath = style;
          currentFrame.style.clipPath = style;
          screenY = touch.screenY;
        }
      }
      function touchEnd() {currentFrame = null;}
      function getComputedViewportY(elem) {
        var style, offset
          , doc = elem.ownerDocument
          , bod = doc.body
          , elemTop = elem.getBoundingClientRect().top   elem.clientTop
          , elemBottom = elem.clientHeight
          , viewportTop = elemTop
          , viewportBottom = elemBottom   elemTop
          , position = getComputedStyle(elem).position;
        try {
          while(true) {
            if(elem === bod || position === 'fixed') {
              if(doc.defaultView.frameElement) {
                elem = doc.defaultView.frameElement;
                position = getComputedStyle(elem).position;
                offset = elem.getBoundingClientRect().top   elem.clientTop;
                viewportTop  = offset;
                viewportBottom = min(viewportBottom   offset, elem.clientHeight   offset);
                elemTop  = offset;
                doc = elem.ownerDocument;
                bod = doc.body;
                continue;
              }
              else break;
            }
            else {
              if(position === 'absolute') {
                elem = elem.offsetParent;
                style = getComputedStyle(elem);
                position = style.position;
                if(position === 'static') continue;
              }
              else {
                elem = elem.parentElement;
                style = getComputedStyle(elem);
                position = style.position;
              }
              if(style.overflowY !== 'visible') {
                offset = elem.getBoundingClientRect().top   elem.clientTop;
                viewportTop = max(viewportTop, offset);
                viewportBottom = min(viewportBottom, elem.clientHeight   offset);
              }
            }
          }
        }
        catch(e) {}
        return {
          top: max(viewportTop, 0)
          ,bottom: min(viewportBottom, doc.defaultView.innerHeight)
          ,elemTop: elemTop
          ,elemBottom: elemBottom   elemTop
        };
      }
    })();
  }
})();

* в jsfiddle включена поддержка мыши для целей тестирования. На производственной площадке, вы хотите установить mouse=false.

Scroll over iframe on ipad and iphone

I have a couple of iFrames in my page, and it is not possible to scroll over those iframes on tablet, phone devices, and in firefox as well. To solve this, I placed a fixed div over the iframe and have the following code to copy the the pointer position (when click happens) and trigger click inside iframe , now the fixed div allows me to scroll over the iFrames and click works too. But when in desktop, even though the click works thanks to this trick, the hover does not work so the buttons and everything else with hover become dead solid. Is there any better solution for this touch-scrolling issue on iFrames?

This is the code I am using to copying and transferring the position of mouse to the iframe and execute the click (foo = the fixed div over the iframe):

$('.foo').click(function(event){
    var iframe = $('.frameClass').get(0);
    var iframeDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

    // Find click position (coordinates)
    var x = event.offsetX;
    var y = event.offsetY;

    // Trigger click inside iframe
    var link = iframeDoc.elementFromPoint(x, y);
    var newEvent = iframeDoc.createEvent('HTMLEvents');
    newEvent.initEvent('click', true, true);
    link.dispatchEvent(newEvent);
});

Как заставить iframe реагировать на ios safari?

Вопрос:

Проблема заключается в том, что когда вы должны использовать IFrames для вставки контента на веб-сайт, то в современном веб-мире ожидается, что IFrame также будет реагировать. Теоретически это просто, просто используйте a <iframe width="100%"></iframe> или установите ширину CSS в iframe { width: 100%; }, но на практике это не совсем так просто, но это может быть.

Если содержимое iframe полностью реагирует и может изменять размеры без внутренних полос прокрутки, то iOS Safari будет изменять размер iframe без каких-либо реальных проблем.

Если вы считаете следующий код:

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test</title>

<style type="text/css" rel="stylesheet">

#Main {
padding: 10px;
}
</style>
</head>
<body>
<h1>Iframe Isolation Test 13.17</h1>
<div id="Main">
<iframe height="950" width="100%" src="Content.html"></iframe>
</div>
</body>
</html>

С Content.html:

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test - Content</title>

<style type="text/css" rel="stylesheet">

#Main {
width: 100%;
background: #ccc;
}

</style>
</head>
<body>
<div id="Main">
<div id="ScrolledArea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada purus quis commodo convallis. Fusce consectetur mauris eget purus tristique blandit. Nam nec volutpat augue. Aliquam sit amet augue vitae orci fermentum tempor sit amet gravida augue. Pellentesque convallis velit eu malesuada malesuada. Aliquam erat volutpat. Nam sollicitudin nulla nec neque viverra, non suscipit purus tincidunt. Aenean blandit nisi felis, sit amet ornare mi vestibulum ac. Praesent ultrices varius arcu quis fringilla. In vitae dui consequat, rutrum sapien ut, aliquam metus. Proin sit amet porta velit, suscipit dignissim arcu. Cras bibendum tellus eu facilisis sodales. Vestibulum posuere, magna ut iaculis consequat, tortor erat vulputate diam, ut pharetra sapien massa ut magna. Donec massa purus, pharetra sed pellentesque nec, posuere ut velit. Nam venenatis feugiat odio quis tristique.
</div>
</div>
</body>
</html>

Тогда это работает без проблем в iOS 7.1 Safari. Вы можете менять ландшафт и портрет без каких-либо проблем.

enter image description here

enter image description here

Однако просто изменив CSS Content.html, добавив следующее:

    #ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}

Вы получаете следующее:

enter image description here

enter image description here

Как вы можете видеть, хотя контент Content.html полностью реагирует (у div # ScrolledArea есть overflow: scroll set), а ширина iframe равна 100%, iframe по-прежнему принимает полную ширину div # ScrolledArea, как если бы переполнение даже не существует. Демо

В таких случаях, если содержание iframe содержало прокрутки на нем, возникает вопрос, как получить ответ iframe, когда содержимое iframe имеет горизонтальные области прокрутки? Проблема здесь заключается не в том, что Content.html не реагирует, а в том, что iOS Safari просто изменяет размер iframe, так что div#ScrolledArea будет полностью видимым.

Лучший ответ:

Решение этой проблемы на самом деле довольно простое, и есть два способа сделать это. Если у вас есть контроль над Content.html, просто измените CSS div#ScrolledArea width:

        width: 1px;
        min-width: 100%;
        *width: 100%;

В принципе идея здесь проста: вы устанавливаете width на то, что меньше, чем область просмотра (в этом случае ширина iframe), а затем перезаписывайте ее с помощью min-width: 100%, чтобы разрешить фактическое width: 100%, которое iOS Safari default перезаписывает. *width: 100%; существует, поэтому код останется совместимым с IE6, но если вы не заботитесь о IE6, вы можете его опустить. Демо

enter image description here

enter image description here

Как вы теперь видите, ширина div#ScrolledArea фактически равна 100%, а overflow: scroll; может делать это и скрывать переполняющий контент. Если у вас есть доступ к содержимому iframe, это предпочтительнее.

Однако, если у вас нет доступа к содержимому iframe (по какой-либо причине), вы можете фактически использовать тот же метод для самого iframe. Просто используйте тот же CSS на iframe:

    iframe {
        width: 1px;
        min-width: 100%;
        *width: 100%;
    }

Однако для этого есть одно ограничение: вам нужно отключить полосы прокрутки с помощью scrolling="no" в iframe для этого:

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

Если полосы прокрутки разрешены, то это больше не будет работать в iframe. Тем не менее, если вы измените Content.html вместо этого, вы можете сохранить прокрутку в iframe. Демо

Ответ №1

Проблема, похоже, в том, что Mobile Safari откажется подчиняться ширине вашего iFrame, если содержащийся в нем документ шире, чем вы указали. Пример:

http://jsbin.com/hapituto/1

В настольном браузере вы увидите iFrame и Div, оба установлены на 300 пикселей. Содержимое более широкое, поэтому вы можете прокручивать iFrame.

В мобильном сафари, однако, вы заметите, что iFrame автоматически расширяется до ширины содержимого.

Я предполагаю, что это обходное решение для давних проблем с прокруткой содержимого внутри страницы. Раньше, если у вас был большой прокручиваемый iframe на сенсорном устройстве, вы бы “застряли” в iframe, поскольку это будет прокрутка вместо самой страницы. Похоже, Apple решила, что поведение iFrame по умолчанию – “нет прокрутки” и расширяется, чтобы предотвратить его.

Один из вариантов может быть обходным путем. Вместо того, чтобы предположить, что iFrame будет прокручиваться, поместите iframe в DIV, который у вас есть, и пусть это прокручивается.

пример: http://jsbin.com/zakedaja/1

Пример разметки:

<div style="overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px;">
<iframe src="https://jsbin.com/roredora/1/" style="width: 600px;"></iframe>
</div>

В мобильном сафари теперь вы можете прокручивать содержимое полностью расширенного iFrame через div, который его содержит.

Улов: Это выглядит действительно уродливым в настольном браузере, так как теперь у вас двойные полосы прокрутки. Таким образом, вам может потребоваться некоторое обнаружение браузера с JS, чтобы обойти это.

Ответ №2

Мне нужно кросс-браузерное решение. Требования были:

  • нужно работать как на iOS, так и в других местах
  • не имеют доступа к контенту в iFrame
  • это нужно для прокрутки!

Основываясь на том, что я узнал от @Idra относительно прокрутки = “нет” на iOS, и на этом посте о том, как разместить контент iFrame на экране в iOS, я получил вот что. Надеюсь, это поможет кому-то =)

HTML

<div id="url-wrapper"></div>

CSS

html, body{
height: 100%;
}

#url-wrapper{
margin-top: 51px;
height: 100%;
}

#url-wrapper iframe{
height: 100%;
width: 100%;
}

#url-wrapper.ios{
overflow-y: auto;
-webkit-overflow-scrolling:touch !important;
height: 100%;
}

#url-wrapper.ios iframe{
height: 100%;
min-width: 100%;
width: 100px;
*width: 100%;
}

JS

function create_iframe(url){

var wrapper = jQuery('#url-wrapper');

if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){
wrapper.addClass('ios');
var scrolling = 'no';
}else{
var scrolling = 'yes';
}

jQuery('<iframe>', {
src: url,
id:  'url',
frameborder: 0,
scrolling: scrolling
}).appendTo(wrapper);

}

Ответ №3

Проблема всех этих решений заключается в том, что высота iframe никогда не меняется.

Это означает, что вы не сможете центрировать элементы внутри iframe используя Javascript, position:fixed; или position:absolute; так как сам iframe никогда не прокручивается.

Мое решение, описанное здесь, заключается в том, чтобы обернуть все содержимое iframe внутри div с помощью этого CSS:

#wrap {
position: fixed;
top: 0;
right:0;
bottom:0;
left: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

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

Вы можете увидеть быстрое и грязное демо здесь.

Ответ №4

Ответ №5

Ответ №6

Ответ №7

Ответ №8

Ответ №9

Для меня решения CSS не работали. Но установка ширины программно делает свою работу. При загрузке iframe установите ширину программно:

 $('iframe').width('100%');

Читайте также:  Лучшее бесплатное радио приложение для iPhone / iPad / iPod Touch
Оцените статью
iPad Мобайл
Добавить комментарий