iframe kwestie wysokości na iOS (Mobile Safari)

Przykład strony źródłowej:iframe kwestie wysokości na iOS (Mobile Safari)

<!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>

Problem polega na tym, że height z 200px z inline stylu IFRAMES jest ignorowany na telefon Safari:

Chciałbym również dynamicznie zmieniać wysokość IFrame poprzez JavaScript JavaScript, który nie działa w ogóle z następującym kodem:

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

Wartość stylu height została poprawnie zmieniona zgodnie z narzędziami programisty, ale jest po prostu ignorowana, ponieważ faktycznie wyrenderowana wysokość ramki IFrame się nie zmienia.

To tylko wydaje się być problemem w mobilnym Safari i działa zgodnie z oczekiwaniami na najnowszych wersjach pulpicie Safari, Firefox, Chrome, Androidy Webview itp

Testpage: http://devpublic.blob.core.windows.net/scriptstest/index.html

Ps .: Przetestowałem to na różnych urządzeniach w przeglądarce, a także zrobiłem tam zrzuty ekranu, ponieważ nie mam pod ręką prawdziwej usługi iDevice.

Źródło

2015-12-16 suamikim

Wygląda to tak: How to get an IFrame to be responsive in iOS Safari?

iFrames mieć problem tylko na iOS, więc trzeba dostosować iframe do niego.

Możesz umieścić div zawijając element iframe, ustawić css na elemencie iframe i, co działało dla mnie, to: prześlij atrybut scrolling = "no".

Życzę ci spojrzenia.

Źródło

2015-12-16 19:30:04

[Rozwiązanie] (http://stackoverflow.com/a/23083463/1273551) we wspomnianym wątku rozwiązało jedną część mojego problemu, która wystąpiła podczas obracania urządzenia. Ponieważ faktycznie mam dostęp do źródeł zawartości ramki IFrame, byłem w stanie rozwiązać moje problemy z wysokością poprzez dynamiczne ustawienie wysokości ciała IFrame na taką samą wysokość, jaką próbowałem ustawić na samej ramce IFrame. – suamikim

Mam ten sam problem. I po wypróbowaniu wszystkich rozwiązań, jakie mogłem znaleźć, w końcu znalazłem, jak go rozwiązać.

Ten problem jest spowodowany przez Safari na iOS, automatycznie wyniesie wysokość elementu iframe do zawartości strony w środku.

Jeśli umieścisz atrybut przewijania = "nie" w elemencie iframe jako <iframe scrolling='no' src='content.html'>, problem ten może zostać rozwiązany, ale element iframe nie może wyświetlić pełnej zawartości strony, treść, która przekracza ramkę, zostanie obcięta.

Musimy więc umieścić element div otaczający element iframe i obsłużyć znajdujące się w nim zdarzenie przewijania.

<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>

referencje:

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

How to get an IFrame to be responsive in iOS Safari?

Nadzieję, że to pomaga.

Źródło

2017-08-08 08:09:50

-1

PROBLEM:

Miałem ten sam problem. Wymiarowanie/stylizowanie elementu div elementu iframe i dodawanie scrolling = "no" do elementu iframe nie działało dla mnie.Przepełnienie przewijania, takie jak Freya, również nie było opcją, ponieważ zawartość mojego elementu iframe wymagała rozmiaru w zależności od kontenera nadrzędnego. Oto jak mój oryginalny (nie działa, przepełnione jego opakowanie) kod iframe został skonstruowany:

<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>

ROZWIĄZANIE:

To super proste trochę CSS Hack wystarczyły:

<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>

Ustaw iframe wysokość/szerokość do małej, losowej wartości pikseli. Ustaw minimalną wysokość & minimalną szerokość do rzeczywistej wysokości/szerokości. To całkowicie rozwiązało problem dla mnie.

Źródło

2017-08-08 21:22:04 AnnaFractuous

Proste dodanie 'min-width' oraz' min-height' nie zadziałało dla mnie i byłbym zaskoczony, gdyby to zrobił. [Odpowiedz przez freya-yu] (https://stackoverflow.com/a/45562779/638546) załatwił sprawę. –

iframe kwestie wysokości na iOS (Mobile Safari)

Odpowiedz

Powiązane problemy