Halaman Penuh <iframe>

99

Saya memiliki contoh kode di bawah ini. Ini berfungsi dengan baik dengan semua browser kecuali browser di perangkat seluler.

Tag overflow adalah masalahnya.

Bekerja dengan semua kecuali untuk seluler:

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

Bekerja dengan semua ponsel dan bukan komputer:

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

Apa cara terbaik untuk membuatnya bekerja pada keduanya?

<!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
sumber
Mengapa tidak dialihkan saja ke cnn.com?
GolezTrol
cnn.com lebih merupakan contoh. untuk menunjukkan perilaku yang saya coba cegah.
Lacer
tambahkan saja <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ke kepala html yang mengandung dan responsivitas kembali lagi (setidaknya sebagian).
Nukey

Jawaban:

173

Inilah kode kerja. Berfungsi di browser desktop dan seluler. semoga membantu. terima kasih atas tanggapan semua orang.

<!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
sumber
2
hati-hati, ketika saya ingin meletakkan iframe di atas - ada masalah di Chrome. Saya menambahkan penutup </iframe> dan bekerja
Michal - wereda-net
Sepertinya itu menghilangkan daya tanggap (yaitu runtuhnya kolom, dll) dari konten di dalam iframe. Tapi entah kenapa hanya saat membuka halaman dengan mobile safari, bukan saat mengubah ukuran desktop browser. Adakah ide yang dapat menyebabkan perilaku itu?
psteinweber
3
@psteinweber, Anda hanya perlu menambahkan <meta content='width=device-width, initial-scale=1.0' name='viewport'>ke halaman berisi.
hanya
Harus menggunakan vwalih-alih %untuk widthdan height properti untuk mendapatkan penyelarasan yang tepat di Chromium 81. Jika tidak, berfungsi seperti pesona.
Josh Habdas
19

Ini lintas-browser dan sepenuhnya responsif:

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

Taruh ini di CSS Anda.

iframe {
  width: 100%;
  height: 100vh;
}
shoriwa-shaun-benjamin
sumber
4

Inilah yang saya gunakan di masa lalu. 

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

Juga di iframetambahkan gaya berikut

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%
Jay Patel
sumber
terima kasih atas balasannya tetapi pada dasarnya itu yang saya miliki sehingga tidak berfungsi. Di peramban seluler, ini memotong apa pun yang meluap dan tidak memungkinkan Anda menggulir.
Lacer
@Lacer Coba ganti overflow: hiddendenganoverflow: auto
Jay Patel
memang mencobanya. pada peramban seluler itu masih memotongnya dan pada peramban desktop itu menyebabkan pengguliran ganda
Lacer
tidak masih gulir ganda di browser desktop dan terputus di browser seluler
Lacer
2

Untuk pengalihan bingkai layar penuh dan hal serupa, saya memiliki dua metode. Keduanya berfungsi dengan baik di seluler dan desktop.

Perhatikan bahwa ini adalah file HTML yang valid dan berfungsi lintas browser lengkap. Ubah saja titledan srcuntuk kebutuhan Anda.
Anda dapat mempertimbangkan untuk membatalkan <meta charset>jika Anda tidak memiliki karakter non-ASCII.

1. ini favorit saya:

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

atau 2. sesuatu seperti itu , sedikit lebih pendek:

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


Catatan :
Agar konservatif, contoh di atas hindari penggunaan height:100vhkarena browser lama tidak mengetahuinya (mungkin diperdebatkan belakangan ini) dan height:100vhtidak selalu sama dengan height:100%di browser seluler (mungkin tidak berlaku di sini). Jika tidak, vhsederhanakan sedikit, jadi

3. ini contoh menggunakan vh (bukan favorit saya, kurang kompatibel dengan sedikit keuntungan)

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