Fail iframe ialah halaman html teks. Iframe dan Frame - apakah itu dan cara terbaik untuk menggunakan bingkai dalam Html
unsur
Bingkai
Apa yang ia lakukan
Bagaimana untuk memasukkan halaman ke dalam halaman HTML? Untuk melakukan ini, anda perlu menggunakan
Paparan
Blok paparan.
Contoh kod
Berkuasa namun mudah digunakan
Pada zaman dahulu yang buruk terdapat banyak reka bentuk web elemen yang merosakkan kehidupan setiap pembangun. Mereka hampir selalu merupakan pendekatan reka bentuk yang buruk. Nasib baik, elemen telah ditamatkan dalam HTML5. Tetapi
Persamaan dan perbezaan
Kedua-dua elemen ini membolehkan anda membuat dokumen HTML yang berasingan. Pautan ke kandungan dokumen yang dirujuk oleh halaman web semasa dinyatakan dalam atribut src.
Perbezaan utama antara
Video itu jelas pada halaman HTML dan bukan dalam panel berasingan. elemen memecahkan paradigma ini dan membenarkan dokumen itu menjalankan kawalan ke atas tetingkap penyemak imbas, memecahkannya kepada beberapa panel kecil (bingkai), yang setiap satunya memaparkan dokumen yang berasingan. Semua perbezaan lain antara dan ikut daripada perbezaan asas ini.
Jangan buat semula reka letak berasaskan bingkai dengan iframe
Suatu hari nanti anda mungkin berhadapan dengan tugas mengemas kini tapak web lama yang dibina menggunakan bingkai. Anda mungkin mahu menggunakan dan lebar susun atur tetap untuk mencipta semula mimpi ngeri yang sama bagi panel dan ambang bebas. Tetapi anda tidak akan dapat menggunakan atribut sasaran untuk membuka pautan dalam bingkai yang berasingan. Anda boleh mula mencari penyelesaian JavaScript. Tolong, jangan buat begitu.
Permohonan yang berjaya (dan dahsyat).
Terdapat beberapa kes penggunaan yang sah untuk membuat halaman HTML:
membenamkan kandungan media pihak ketiga;
membenamkan kandungan media anda sendiri melalui dokumen merentas platform;
membenamkan contoh kod;
membenamkan "applet" pihak ketiga sebagai bentuk pembayaran.
Berikut ialah beberapa kes penggunaan yang dahsyat: :
Galeri gambar;
forum atau sembang.
Jika anda perlu membenamkan dokumen HTML bebas yang sedia ada ke dalam dokumen semasa, gunakan . Jika anda membina segala-galanya dari awal, tiada sebab untuk membahagikan reka bentuk halaman kepada beberapa dokumen berasingan. Terutamanya jika ia sebenarnya bukan bahagian kandungan bebas.
atribut iframe
Nama atribut
Maknanya
Penerangan
kotak pasir
Benarkan-asal-sama Benarkan navigasi atas Benarkan-borang Benarkan-skrip
Menetapkan beberapa sekatan pada kandungan yang dimuatkan ke dalam bingkai. Tetapkan sebelum cara membuat halaman HTML.
menatal
ya tiada auto
Menentukan sama ada mahu menunjukkan skrol dalam bingkai atau tidak. Ditamatkan dalam HTML5. Gunakan CSS sebaliknya.
Nama
Nama
Menentukan nama bingkai.
Selaraskan
kiri kanan atas tengah bawah
Menentukan penjajaran bingkai berbanding dengan elemen sekeliling. Sudah ketinggalan zaman. Gunakan CSS sebaliknya.
sempadan bingkai
ya (atau 1) tidak
Digunakan untuk membolehkan paparan sempadan di sekeliling bingkai. Ditamatkan dalam HTML5. Gunakan CSS sebaliknya.
longdesc
URL
Digunakan untuk menentukan URL halaman yang mengandungi penerangan panjang tentang kandungan bingkai. Sudah ketinggalan zaman. Gunakan CSS sebaliknya.
lebar margin
piksel
Digunakan untuk mengawal lebar padding dari kandungan ke sempadan bingkai. Sudah ketinggalan zaman. Gunakan CSS sebaliknya.
src
URL
Menentukan URL dokumen untuk dipaparkan dalam IFRAME.
vspace
piksel
Menetapkan jidar menegak daripada bingkai kepada kandungan sekeliling. Sudah ketinggalan zaman. Gunakan CSS sebaliknya.
lebar
piksel %
Mentakrifkan lebar bingkai pada halaman HTML.
Terjemahan artikel “ ” telah disediakan oleh pasukan projek mesra.
baik buruk
Sumber web yang direka secara profesional ialah produk yang lengkap dan berkembang, persembahan maklumat yang sistematik, reka bentuk asli dan logik interaktif untuk bekerja dengan ramai pelawat.
Tapak web ialah wajah organisasi, kad perniagaan pemilik, penilaian pembangun dan sistem berfungsi sepenuhnya untuk menyampaikan maklumat tertentu yang berfungsi dalam bidang subjek tertentu untuk menyelesaikan masalah yang ditakrifkan dengan jelas.
Konsep dan tujuan "iframe"
Bingkai tidak menunjukkan prestasi terbaik apabila standard HTML menawarkan pilihan bingkai. Keadaan tidak menjadi lebih baik dengan kemunculan iframe. Pelayar dan pemilik tapak web tidak terlalu bersedia untuk bersetuju untuk memaparkan maklumat pihak ketiga melalui elemen tersebut.
Bingkai bukan tetingkap timbul atau percubaan untuk memaksa sesuatu pada pelawat. Anda juga boleh memahami pembangun sumber yang tidak mahu produknya dipaparkan di tapak web orang lain sebagai latar belakang "penari sandaran".
Walau bagaimanapun, terdapat bilangan aplikasi yang mencukupi apabila kedua-dua pembangun sumber web (atau dokumen) dan pembangun-pengguna sumber ini dalam produk mereka berminat antara satu sama lain. Contohnya, peta Google atau video Youtube. Terdapat idea popular lain: ramalan cuaca, dinamik kadar pertukaran saham, bacaan instrumen, data statistik.
Bingkai ialah tetingkap ke dalam dunia data yang dikumpul, diproses dan dipersembahkan oleh seseorang pada sumber web mereka. Ia juga menawarkan akses kepada mereka melalui bingkai di tapak pengguna, biasanya melalui sistem keperluan atau API khusus (pustaka fungsi).
HTML "iframe": contoh syarat untuk digunakan
Tidak setiap tapak web boleh dipaparkan dalam iframe. Sebelum merancang untuk menggunakan bingkai di tapak webnya, pembangun mesti bersetuju dengan pemilik sumber web atau dokumen yang dia ingin paparkan di tapak webnya dalam satu bentuk atau yang lain. Sebagai contoh, video daripada Youtube boleh dimasukkan ke dalam tag bingkai, seperti yang ditunjukkan di bawah (butang kanan tetikus ditekan pada video tapak pembangun).
Dengan menyalin "kod HTML" yang disediakan, anda boleh menampal strim video yang dikehendaki ke tapak web anda dengan selamat. Teg akan menunjukkan semua yang anda perlukan: kedua-dua dimensi dan keadaan paparan. Adalah mudah untuk meletakkan teg "iframe" dalam div HTML - ini akan membolehkan kedudukan optimum kandungan pihak ketiga dalam tapak anda sendiri.
Rekursi dan Bingkai: Contoh Praktikal
Adalah diragui bahawa iframe akan mempunyai nasib yang lebih baik daripada bingkai. Perkembangan penghuraian dan perkaitan maklumat yang dikumpul mengikut kriteria menjadikan prospek memaparkan kandungan orang lain dalam format "seadanya" menjadi ilusi. Format "seperti yang sepatutnya" menjadi lebih disukai.
Walau bagaimanapun, hari ini adalah sesuai (dan mengikut urutan perkara) untuk menggunakan perkembangan Google dan Youtube, serta cuaca, politik, statistik, muzik, permainan dan sumber lain yang direka bentuk untuk bingkai atau penggunaan pihak ketiga yang lain.
Dalam contoh di atas terdapat tiga contoh "iframe" HTML:
Peta Google;
video daripada tapak pihak ketiga;
video dari Youtube.
Bingkai terakhir, keempat memaut ke tapak di mana semua bingkai ini berada. Gambar di sebelah kiri ialah tapak selepas dimuatkan. Gambar di sebelah kanan ialah tapak dalam proses dipaparkan selepas beberapa ketika (video dalam setiap bingkai "mengalir" dalam iramanya sendiri), tetapi peluncur dalam (4!) dialihkan ke bawah. Anda boleh melihat dengan jelas bahawa peta dan video masih dipaparkan, tetapi paparan itu sendiri tidak berjaya.
Kod untuk "iframe" dan penggayaan untuk contoh ini ditunjukkan di bawah.
Meletakkan bingkai dalam div adalah mudah bukan sahaja dari sudut pandangan kedudukan. Bingkai boleh dibuat dengan cepat. JavaScript membolehkan anda membuat teg HTML, termasuk bingkai. JavaScript ialah bahasa berciri penuh yang menyediakan semua kandungan halaman HTML. Ia boleh berfungsi secara rekursif, adaptif, dan menyesuaikan diri dengan minat pelawat semasa proses dialog.
Bingkai bukan sahaja statik. Kandungannya adalah berasingan daripada kandungan halaman di mana ia disiarkan. Anda boleh mencari cara untuk bertukar maklumat antara sumber yang sebenarnya berbeza, tetapi ini adalah sebahagian daripada siri masalah pertukaran maklumat antara domain yang berbeza.
Tetapi bukan hanya pertukaran maklumat dan rekursi yang tidak dikawal sepenuhnya oleh HTML. Iframe ialah contoh teg yang perlu diuji dengan teliti dalam situasi tertentu sebelum digunakan.
Tidak setiap tapak bersetuju dan tidak setiap kandungan boleh diakses. Isunya bukan sahaja mengenai hak cipta. Keupayaan untuk memaparkan maklumat dalam bingkai boleh dipengaruhi oleh penyemak imbas, pelawat, pembangun sumber atau pelayan di mana sumber itu dihoskan.
Penghuraian sendiri atau kandungan pihak ketiga
Apakah bingkai dari segi kandungan laman web? Ini tambahan dia. Pembangun sedang membuat platform web untuk berdagang unit tajuk Webmoney, dan keputusannya untuk meletakkan tetingkap dengan dinamik kadar pertukaran adalah munasabah. Kandungan terus daripada pertukaran itu sendiri lebih menjanjikan daripada menghurai dan pembangunan dalaman.
Pembangun sedang mencipta kedai barangan pengguna, dan keinginannya untuk menawarkan pengunjung peluang untuk melihat laman web pengeluar setiap produk adalah tugas yang sukar, tetapi menarik untuk pelanggan. Mungkin strategi ini akan menjadikan kedai lebih baik daripada yang menghuraikan tapak web pengeluar produk, dan selalunya, pesaing.
Apakah bingkai pembekal kandungan? Ini adalah penyediaan maklumat. Pada dasarnya, ini adalah penstabilan kerja syarikat, yang mungkin tidak membuat tapak webnya sendiri untuk kerja sama sekali, tetapi memberi tumpuan khusus pada penggunaan bingkai. Khususnya, tidak ada keraguan bahawa Peta Google ialah idea yang bagus, tetapi ia sesuai dalam aplikasi tertentu:
agensi pelancongan - laluan dan peta trafik;
penghantaran kargo - pengiraan laluan, kos kewangan, isi semula bahan api, dsb.;
pelayar untuk bandar dan wilayah...
Dalam konteks ini, bingkai adalah dalam permintaan; mereka menjadikan tapak lebih praktikal. Selain itu, pembangun hanya boleh membuat tetingkap untuk kandungan pihak ketiga. HTML "iframe" ialah contoh pembahagian kerja praktikal. Satu organisasi membekalkan maklumat, satu lagi menyediakannya kepada pelanggan.
Sukar untuk mengatakan masa depan untuk pengaturcaraan Internet. Segala-galanya berkembang dengan begitu dinamik, dan komponen perkakasan menyediakan lebih banyak peluang. Mungkin iframe HTML ialah contoh gabungan ideal pelbagai sumber web dan teknologi Internet. Mungkin ini hanyalah satu peringkat di jalan menuju pembentukan idea yang lebih menjanjikan.
Walau apa pun, teg iframe digunakan, dan ia adalah dalam permintaan dalam pelbagai tugas praktikal.
Salam, pembaca laman blog yang dihormati. Hari ini kita akan bercakap tentang bingkai dalam HTML. Sudah jelas bahawa kita akan bermula dari awal, iaitu dengan jenis haiwan apa ini. Kami juga akan membincangkan tentang (Frame) dan masa hadapan (Iframe) unsur-unsur ini dalam versi semasa bahasa penanda hiperteks dan dalam standard Html 5 baharu dengan .
Pada akhir artikel, selepas penerangan terperinci tentang proses mencipta bingkai terbina dalam dan struktur klasiknya dalam kod Html (sudah jarang digunakan), kami akan menyentuh tentang kaitan membina tapak padanya, dan juga membincangkan kemungkinan cara menggunakannya dalam tempoh masa semasa menggunakan contoh blog saya.
Apakah itu dan bagaimana Iframe berbeza daripada Frame?
Apa itu? Ternyata ia boleh digunakan bukan sahaja di laman web, tetapi juga dalam mana-mana aplikasi untuk program, tetapi ia berbeza kerana tetingkap halaman web atau aplikasi akan dibahagikan kepada beberapa kawasan, di mana setiap satu dokumen yang berasingan dimuatkan . Selain itu, kawasan bingkai ini berkelakuan secara bebas antara satu sama lain.
Mungkin contoh penggunaannya yang paling jelas, yang hampir semua anda temui, adalah apa yang dipanggil fail bantuan yang ada pada banyak program yang dipasang pada komputer anda.
Fail dengan menu bantuan dimuatkan ke dalam tetingkap kiri, dan dokumen yang sepadan dengan item menu yang dipilih dipaparkan dalam tetingkap kanan. Perlu diperhatikan bahawa struktur ini membolehkan anda tidak memuat semula fail dengan menu ke dalam tetingkap kiri apabila membuka dokumen baru di sebelah kanan. Ini adalah apa yang ia terdiri daripada kelebihan utama menggunakan bingkai dalam HTML.
Sebenarnya, nama elemen ini harus ditafsirkan sebagai tetingkap bebas. Dengan bantuan bingkai, kami mempunyai peluang untuk membahagikan satu tetingkap besar kepada beberapa serpihan, yang seterusnya boleh berfungsi sebagai penerima untuk dokumen berasingan yang bebas antara satu sama lain (halaman, teks, imej, video, dll.).
Bagaimanakah struktur bingkai dicipta dalam bahasa penanda hiperteks? Jika kita bercakap tentang standard Html 4.01 (mengikut klasifikasi), yang merupakan yang utama pada masa semasa, maka tiga elemen digunakan untuk ini - Frame, Frameset dan Noframes.
Iframe - bingkai terbina dalam dalam standard Html 5
Jika kita bercakap tentang standard Html 5 (masa depan kita, beberapa elemen yang telah disokong oleh banyak penyemak imbas), maka tidak akan ada lagi tag Frame, Frameset dan Noframes, serta struktur bingkai klasik; sebaliknya, akan ada satu teg Iframe tunggal (bingkai terbenam), yang akan kita bincangkan pada mulanya, dan kemudian kita akan mengalihkan perhatian kita kepada skema klasik daripada versi 4.01, yang sebenarnya sedang digunakan sekarang.
Iframe, tidak seperti klasik yang dibincangkan di bawah, tidak memerlukan menggantikan tag Body dengan tag Frameset. Itu. tag ini boleh disisipkan pada halaman biasa, contohnya, di dalam perenggan atau di mana-mana sahaja. Pada terasnya, elemen ini sangat serupa dengan teg Img yang telah kami pertimbangkan.
Ia ialah elemen sebaris dengan kandungan boleh diganti kerana ia berkelakuan sama seperti elemen sebaris, tetapi ia dipaparkan kandungan luaran yang luar biasa. Terdapat hanya empat elemen sedemikian dalam bahasa HTML - Img, Iframe, Object dan Embed. Oleh itu, wira kami membayangkan kehadiran fail luaran yang akan dimuatkan ke dalam kawasan yang saiznya ditetapkan menggunakan atribut tag ini.
Itu. Iframe ialah elemen sinki di mana objek luaran (seperti video) dimuatkan. Dan untuk menunjukkan laluan ke fail ini, yang harus dimuatkan pada halaman, gunakan atribut Src khas. Tetapi tidak seperti Img, elemen Iframe dipasangkan, i.e. terdapat juga tag penutup:
Contoh ini menunjukkan output pada halaman video Youtube menggunakan Iframe. Untuk mengehadkan kawasan bingkai (tetingkap) di mana fail luaran akan dimuatkan, atribut disediakan Lebar dan Tinggi, yang nilainya dinyatakan dalam piksel:
Itu. teg ini mencipta kawasan di mana beberapa objek luaran dimuatkan (tidak kira sama ada ia dari tapak anda atau dari sumber lain). Lebar dan ketinggian kawasan ditentukan menggunakan Lebar dan Tinggi, dan atribut Src menentukan laluan ke objek ini.
Elemen Iframe mewarisi semua atribut ini daripada teg sebaris yang serupa dengan kandungan yang diganti (seperti Img yang telah dinyatakan di atas). Nah, dia juga mengambil atribut dari gambar Hspace dan Vspace, yang membolehkan anda menetapkan inden daripada sempadan bingkai kepada teks yang membungkusnya.
Ia juga penting bahawa penjajaran bingkai terbina dalam dijalankan dengan cara yang sama seperti yang kita dapat lihat semasa mengkaji imej dalam Html - . Semuanya sama Selaraskan, tetapi untuk teg Iframe dengan kemungkinan nilai Bawah, Atas, Tengah, Kiri dan Kanan.
Tetapi elemen ini juga mengambil beberapa atribut daripada tag Frame daripada struktur bingkai klasik, yang akan kita bincangkan dengan terperinci di bawah dalam teks. Atribut ini termasuk Nama, yang nilainya boleh digunakan sebagai nilai supaya dokumen yang anda perlukan apabila mengklik pada pautan terbuka dalam tetingkap bingkai ini (baca lebih lanjut di bawah).
Juga dalam Iframe, atribut Frameborder berhijrah daripada tag Frame, yang hanya mempunyai dua nilai - sama ada 0 (bingkai di sekeliling bingkai tidak dipaparkan) atau 1 (bingkai kelihatan). Nilai lalai ialah Frameborder=1, jadi untuk mengalih keluarnya anda perlu memasukkan Frameborder="0":
Atribut Scrolling juga telah dipindahkan daripada Frame ke elemen ini, yang mempunyai nilai lalai Auto - bar skrol dalam bingkai akan muncul seperti yang diperlukan apabila kandungan lebih besar daripada saiz tetingkap yang bertujuan untuk memaparkannya.
Nah, atribut Marginwidth dan Marginheight juga dialihkan daripada elemen Frame. Mereka akan dibincangkan secara terperinci di bawah dalam teks, tetapi secara ringkas - mereka membenarkan anda untuk menetapkan lekukan dalam lebar dan ketinggian dari tepi bingkai ke kandungan yang diletakkan di dalamnya.
Seperti yang telah saya nyatakan, contoh jelas menggunakan Iframe ialah:
Dengan memasukkan Iframe terus ke dalam halaman web, anda akan menerima output video daripada YouTube. Kami menyimpulkan bahawa elemen ini ialah persilangan antara elemen sebaris dengan kandungan yang diganti dan, sebenarnya, bingkai klasik, yang kini akan kita bincangkan.
Bingkai berdasarkan tag Frame dan Frameset - strukturnya
Oleh itu, mencipta struktur bingkai klasik bermula dengan apa yang anda tulis dalam kod Html dan bukannya teg Body pembuka dan penutup, yang biasanya perlu ada dalam mana-mana dokumen, menggantikannya dengan bekas berasaskan elemen Set bingkai.
Perkara asas ialah elemen Body tidak boleh digunakan dalam kes ini - sama ada Body (untuk dokumen biasa) atau Frameset (semasa mencipta struktur bingkai dokumen):
Setiap bingkai yang kami buat di dalam bingkai utama dibuat menggunakan elemen yang berasingan Bingkai. Teg ini adalah tunggal dan di dalamnya kami menetapkan laluan ke dokumen yang akan dimuatkan ke dalam tetingkap ini.
Elemen ketiga yang masih belum kita sentuh ialah Tanpa bingkai. Ia dipasangkan dan membolehkan anda menulis beberapa teks di dalam, yang akan diproses oleh penyemak imbas dan dipaparkan pada halaman web hanya jika pelayar yang sama ini (atau peranti paparan lain) tidak menyokong bingkai. Ini boleh berlaku, sebagai contoh, jika anda menggunakan penyemak imbas untuk peranti mudah alih.
Biasanya, Noframes menambah bukan sahaja maklumat tentang situasi semasa dengan kemustahilan memproses struktur bingkai, tetapi juga menambah keupayaan untuk pergi ke halaman lain, di mana anda boleh terus bekerja tanpa menggunakannya. Sukar untuk mengatakan apa-apa lagi tentang dia, jadi mari kita teruskan.
Ternyata elemen Frameset, yang digunakan bukannya teg Body, mengambil semua ruang yang diperuntukkan untuk kawasan tontonan dan bingkai akan dibuat di dalam kawasan ini menggunakan elemen Frame individu. Dalam hal ini, persoalan timbul - bagaimana untuk membahagikan kawasan tontonan antara tingkap yang berasingan atau, dengan kata lain, bagaimana untuk menetapkan saiz setiap satu daripadanya.
Ini dilakukan dengan menambahkan atribut yang sesuai pada elemen Frameset. Terdapat dua daripada mereka - Kol dan Baris. Cols menetapkan pembahagian tetingkap besar kepada bingkai atau lajur menegak, dan Rows membenarkan anda membahagikannya kepada tetingkap atau baris mendatar.
Mencipta struktur berdasarkan Frameset dan atribut Cols dan Rowsnya
Nilai untuk Kol dan Baris teg Html Frameset ialah nombor yang dipisahkan dengan koma (tanpa ruang). Nombor-nombor ini menetapkan perkadaran tetingkap yang kita ingin dapatkan sebagai hasilnya. Oleh itu, tidak kira berapa banyak nombor yang dipisahkan koma ditulis dalam Kol atau Baris, bilangan bingkai yang kita ada akan menjadi hasilnya.
Sebagai contoh, menggunakan tatatanda ini kita akan mendapat tiga lajur menegak yang lebarnya sepadan dengan perkadaran 2:5:3.