Cała strona <iframe>

100

Mam przykładowy kod poniżej. Działa to dobrze we wszystkich przeglądarkach z wyjątkiem przeglądarek na urządzeniach mobilnych.

Problemem jest tag przepełnienia.

Działa ze wszystkimi oprócz telefonów komórkowych:

margin: 0; padding: 0; height: 100%; overflow: hidden;

Działa ze wszystkimi urządzeniami przenośnymi, a nie komputerami:

margin: 0; padding: 0; height: 100%;

Jaki jest najlepszy sposób, aby to działało na obu?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
        </style>
    </head>
    <body>
        <iframe width="100%" height="100%" src="http://www.cnn.com" />
    </body>
</html>
html css iframe Lacer
źródło
Dlaczego po prostu nie przekierować do cnn.com?
GolezTrol,
cnn.com jest raczej przykładem. aby pokazać zachowanie, któremu staram się zapobiec.
Lacer,
po prostu dodaj <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> do nagłówka zawierającego html, a responsywność powróci (przynajmniej częściowo).
Nukey

Odpowiedzi:

174

Oto działający kod. Działa w przeglądarkach stacjonarnych i mobilnych. mam nadzieję, że to pomoże. dzięki za każdą odpowiedź.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }

            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" />
        </div>
    </body>
</html>
Lacer
źródło
3
uważaj, gdy chciałem umieścić ramkę iframe powyżej - wystąpił problem w Chrome. Dodałem zamknięcie </iframe> i działa
Michał - wereda-net
Wygląda na to, że odbiera czas reakcji (tj. Zwijanie kolumn itp.) Z zawartości elementu iframe. Ale jakoś tylko podczas otwierania strony z mobilnym safari, a nie podczas zmiany rozmiaru przeglądarki na komputerze. Jakieś pomysły, co mogłoby spowodować takie zachowanie?
psteinweber
4
@psteinweber, wystarczy dodać <meta content='width=device-width, initial-scale=1.0' name='viewport'>do strony zawierającej.
lipiec
Musiał użyć vwzamiast %for widthi height właściwości, aby uzyskać właściwe wyrównanie w Chromium 81. W przeciwnym razie działa jak urok.
Josh Habdas
19

To działa na wiele przeglądarek i jest w pełni responsywne:

<iframe
  src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"
  style="
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999999;
    height: 100%;
  ">
</iframe>
tawsif torabi
źródło
8

Umieść to w swoim CSS.

iframe {
  width: 100%;
  height: 100vh;
}
shoriwa-shaun-benjamin
źródło
4

To jest to, czego używałem w przeszłości. 

html, body {
  height: 100%;
  overflow: auto;
}

Również w iframedodać następujący styl

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%
Jay Patel
źródło
dzięki za odpowiedź, ale w zasadzie to mam, więc nie działa. W przeglądarce mobilnej odcina wszystko, co się przepełnia i nie pozwala na przewijanie.
Lacer
@Lacer Spróbuj wymienić overflow: hiddenzoverflow: auto
Jay Patel
próbowałem tego. w przeglądarce mobilnej nadal go odcina, a na przeglądarkach stacjonarnych powoduje podwójne przewijanie
Lacer.
nie, nadal podwójne przewijanie w przeglądarce na komputerze i wyłączanie w przeglądarkach mobilnych
Lacer
2

W przypadku pełnoekranowych przekierowań ramek i podobnych rzeczy mam dwie metody. Oba działają dobrze na urządzeniach mobilnych i komputerach.

Zauważ, że są to kompletne, działające w różnych przeglądarkach, prawidłowe pliki HTML. Po prostu zmień titlei srcdla swoich potrzeb.
Możesz rozważyć usunięcie, <meta charset>jeśli nie masz znaków spoza zestawu ASCII.

1. to jest mój ulubiony:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-1 </title>
<meta name=viewport content="width=device-width">
<style>
 html, body, iframe { height:100%; width:100%; margin:0; border:0; display:block }
</style>
<iframe src=src1></iframe>

<!-- More verbose CSS for better understanding:
  html   { height:100% }
  body   { height:100%; margin:0 }
  iframe { height:100%; border:0; display:block; width:100% } -->

lub 2. coś takiego , trochę krócej:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-2 </title>
<meta name=viewport content="width=device-width">
<iframe src=src2 style="position:absolute; top:0; left:0; width:100%; height:100%; border:0">
</iframe>


Uwaga :
aby zachować ostrożność, powyższe przykłady unikają używania, height:100vhponieważ stare przeglądarki tego nie znają (być może obecnie dyskusyjne) i height:100vhnie zawsze jest to samo height:100%w przeglądarkach mobilnych (prawdopodobnie nie dotyczy tutaj). Inaczej,vh to trochę upraszcza, więc

3. to jest przykład używający vh (nie mój ulubiony, mniej kompatybilny z małą zaletą)

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-3 </title>
<meta name=viewport content="width=device-width">
<style>
 body { margin:0 }
 iframe { display:block; width:100%; height:100vh; border:0 }
</style>
<iframe src=src3></iframe>
jj
źródło