Menentukan konten iframe dan bukan atribut src ke halaman

90

Saat ini saya sedang mengerjakan formulir yang menyertakan beberapa input file untuk mengunggah gambar. Ada onchange()acara untuk input yang mengirimkan gambar ke iframe, kemudian secara dinamis memuat gambar yang diunggah ke dalam formulir, dengan bidang yang akan dimodifikasi untuk mereka (seperti nama dan geo-lokalisasi ).

Karena saya tidak bisa membuat sarang formulir, file_inputitu juga terkandung dalam file iframe. Pada akhirnya saya menggunakan bagian iframedalam yang lain iframe. Jadi saya punya sesuatu seperti ini:

<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>

dan HTML yang dimuat ke dalam iframeadalah sesuatu seperti (tidak termasuk tag html, headdan body)

<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>

Ini berfungsi dengan baik, kecuali kenyataan bahwa dibutuhkan beberapa detik untuk memuat yang pertama iframe, sehingga masukan file tidak dimuat dengan sisa halaman. Ini tidak ideal secara visual. Saya bisa menyelesaikannya jika saya bisa menentukan iframekonten tanpa perlu memuat halaman lain (ditentukan oleh file_input_urldi pertama iframe).

Adakah cara untuk menentukan iframekonten dalam dokumen yang sama, atau dapatkah itu hanya ditentukan dengan srcatribut, yang memerlukan pemuatan halaman lain?

html iframe orlox
sumber
Tidak perlu waktu "beberapa detik" untuk memuat iframe tersebut. Saya mengharapkan itu menjadi lebih seperti sepersepuluh milidetik ditambah "waktu untuk menggigit" (yang juga harus milidetik). Anda harus menyelidiki apa yang menyebabkan semua kelambatan - mungkin ada yang salah dengan server Anda.
Abhi Beckert

Jawaban:

96

Anda bisa .write()memasukkan isinya ke dalam dokumen iframe. Contoh:

<iframe id="FileFrame" src="about:blank"></iframe>

<script type="text/javascript">
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
   doc.close();
</script>
Guffa
sumber
1
Sempat memikirkan kemungkinan ini, bagaimanapun, html yang harus dimuat ke iframe itu rumit, dan menanganinya sepenuhnya dalam javascript untuk menuliskannya ke iframe akan mengaburkan implementasinya terlalu banyak (sampai pada titik yang saya lebih suka untuk biarkan apa adanya).
orlox
2
@ orlox: Dapatkan konten Anda dari server menggunakan Ajax dan masukkan. Jika Anda tidak ingin pergi ke sana, buat divelemen tersembunyi dengan konten Anda dan tempatkan kontennya di iframeantara <body>dan </body>.
bertumpuk
11
Semakin banyak saya belajar tentang pembatasan iframe, semakin saya membenci mereka
John Magnolia
1
Bagaimana cara menghindari tanda kutip tunggal menggunakan metode ini? Beberapa di antaranya adalah HTML-penting (misalnya class = 'example'), beberapa CSS-penting (misalnya font-family: 'Verdana';) dan beberapa konten (misalnya George O'Malley).
Dan Bechard
2
@Dan: Untuk meng-escape nilai apa pun yang akan digunakan dalam string JavaScript yang dipisahkan dengan apostrof, pertama-tama Anda keluar dari garis miring terbalik, lalu apostrof. Misalnya menggunakan C # untuk output string dalam kode: doc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');.
Guffa
36

iframe sekarang mendukung srcdoc yang dapat digunakan untuk menentukan konten HTML halaman yang akan ditampilkan dalam bingkai sebaris.

Ayush Gupta
sumber
2
IE tidak mendukung hak ini, tetapi Anda dapat memeriksa caniuse untuk status terbaru di atasnya.
Ayush Gupta
Dokumentasi tentang MDN
Benoit Blanchon
22

Anda dapat menggunakan data:URL di src:

var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);
<iframe></iframe>
Luaskan cuplikan

Perbedaan antara srcdoc = “…” dan src = “data: text / html,…” dalam iframe .

Ubah HTML menjadi data: tautan teks / html menggunakan JavaScript .

pengguna
sumber
1
Anda bahkan tidak memerlukan JavaScript: srcatribut dapat ditentukan secara inline jika di-escape misalnya menggunakan rawurlencodedi PHP:<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>
Jake
Microsoft menambahkan dukungan untuk ini pada waktu yang hampir bersamaan saat mereka menambahkan dukungan srcdoc, dan srcdocmerupakan cara yang lebih baik untuk melakukannya. URL data hanya didukung secara luas untuk gambar dan CSS - sejauh yang saya tahu tidak ada versi Internet Explorer yang mendukungnya dalam iframe.
Abhi Beckert
6

Dalam kombinasi dengan apa yang dijelaskan Guffa, Anda dapat menggunakan teknik yang dijelaskan dalam Penjelasan <script type = "text / template"> ... </script> untuk menyimpan dokumen HTML dalam scriptelemen khusus (lihat tautan untuk penjelasan tentang bagaimana ini bekerja). Itu jauh lebih mudah daripada menyimpan dokumen HTML dalam sebuah string.

ximo
sumber
Setelah dipikir-pikir, itu tidak akan bekerja dengan baik untuk dokumen HTML lengkap. Tag seperti <html>, <body>, <script>hanya akan membingungkan browser, melanggar rendering dokumen.
ximo
Tampaknya tidak menjadi masalah, tag HTML di dalam skrip akan diabaikan.
HBP
Anda benar :) Saya belum benar-benar mencoba teknik ini ketika saya menulisnya, dan pasti telah mengambil asumsi itu dari suatu tempat. Saya kemudian mengetahui bahwa apa pun di dalam <script>tag akan diabaikan oleh browser .. Terima kasih telah mengoreksi saya!
ximo