Sayfanın src özelliği yerine bir iframe içeriğini belirtme

90

Şu anda resim yüklemek için bazı dosya girdileri içeren bir form üzerinde çalışıyorum. onchange()Resimleri bir'e gönderen ve iframedaha sonra yüklenen resimleri onlar için değiştirilecek alanlarla ( ad ve coğrafi yerelleştirme gibi ) dinamik olarak forma yükleyen bu girdiler için bir olay vardır .

Formları iç içe geçiremediğim için, formlar file_inputda bir iframe. Sonunda iframediğerinin içini kullanıyorum iframe. Bende bunun gibi bir şey var:

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

ve yüklenen HTML iframe(hariç gibi bir şey html, headve bodyetiketleri)

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

Bu, ilkini yüklemenin birkaç saniye sürmesi dışında harika çalışıyor iframe, böylece dosya girişi sayfanın geri kalanıyla yüklenmiyor. Bu görsel olarak ideal değil. iframeBaşka bir sayfa yüklemeye gerek kalmadan içeriği belirleyebilseydim çözebilirdim ( file_input_urlilk sayfada ile belirtilir iframe).

iframeAynı belgedeki içeriği belirtmenin bir yolu var mı , yoksa srcbaşka bir sayfanın yüklenmesini gerektiren yalnızca öznitelikle belirtilebilir mi?

html iframe

— orlox
kaynak

Bu iframe'in yüklenmesi "birkaç saniye" sürmemelidir. Milisaniyenin onda biri artı "ısırma zamanı" (ki bu da milisaniye olmalıdır) gibi olmasını beklerdim. Tüm gecikmelere neyin sebep olduğunu araştırmalısınız - muhtemelen sunucunuzda bir sorun.

— Abhi Beckert

96

.write()İçeriği iframe belgesine ekleyebilirsiniz . Misal:

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

1

Bu olasılığı düşünmüş olsaydım, ancak, iframe'e yüklenmesi gereken html karmaşıktır ve iframe'e yazmak için onu tamamen javascript'te kullanmak, uygulamayı çok fazla belirsizleştirir (tercih ettiğim noktaya kadar olduğu gibi bırakın).

— orlox

2

@orlox: Ajax kullanarak içeriğinizi sunucudan alın ve enjekte edin. Eğer bu şekilde gitmek istemiyorsanız, gizli bir hale divİçeriklerinizle elemanı ve onun içeriği yerleştirmek iframearasında <body>ve </body>.

— 2013

11

İç çerçeve kısıtlamaları hakkında ne kadar çok şey öğrenirsem, onlardan o kadar çok nefret ederim

— John Magnolia

1

Bu yöntemi kullanarak tek tırnak işaretlerinden nasıl kaçabilirim? Bazıları HTML açısından önemlidir (örn. Sınıf = 'örnek'), bazıları CSS açısından önemlidir (örn. Font-family: 'Verdana';) ve bazıları içeriktir (örn. George O'Malley).

— Dan Bechard

2

@Dan: Kesme işaretiyle ayrılmış JavaScript dizesinde kullanılacak herhangi bir değerden kaçınmak için, önce ters eğik çizgilerden, sonra kesme işaretlerinden kaçarsınız. Örneğin çıkışa kodda bir dize C # kullanarak: doc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');.

— Guffa

36

iframe artık satır içi çerçevede gösterilecek sayfanın HTML içeriğini belirtmek için kullanılabilen srcdoc'u desteklemektedir .

— Ayush Gupta
kaynak

2

IE bu hakkı desteklemiyor ancak caniuse ile ilgili son durumu kontrol edebilirsiniz .

— Ayush Gupta

MDN ile ilgili belgeler

— Benoit Blanchon

22

data:URL'yi şurada kullanabilirsiniz 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>

Snippet'i genişlet

Bir iframe'de srcdoc = “…” ve src = “data: text / html,…” arasındaki fark .

HTML'yi veriye dönüştürün: JavaScript kullanarak metin / html bağlantısı .

— kullanıcı
kaynak

1

Herhangi bir JavaScript'e bile ihtiyacınız yok: srcöznitelik, örneğin rawurlencodePHP'de kullanılarak satır içinde belirtilebilir :<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>

— Jake

Microsoft, destek ekledikçe hemen hemen aynı zamanda bunun için destek ekledi srcdocve srcdocbunu yapmanın daha iyi bir yolu. Veri URL'leri yalnızca resimler ve CSS için geniş çapta destekleniyor - bildiğim kadarıyla Internet Explorer'ın hiçbir sürümü bir iç çerçevede bunları desteklemiyor.

— Abhi Beckert

6

Guffa'nın tarif ettiği ile birlikte , HTML belgesini özel bir öğede saklamak için <script type = "text / template"> ... </script> açıklaması bölümünde açıklanan tekniği kullanabilirsiniz script(açıklama için bağlantıya bakın) bu nasıl çalışır). Bu, HTML belgesini bir dizede saklamaktan çok daha kolaydır.

— ximo
kaynak

İkinci düşünceye göre, bu tam bir HTML belgesi için pek işe yaramaz. Gibi etiketler <html>, <body>, <script>yalnızca belgenin oluşturma kırma, tarayıcıyı şaşırtmak istiyorum.

— ximo

Bu bir sorun gibi görünmüyor, komut dosyalarının içindeki HTML etiketleri yok sayılıyor.

— HBP

Haklısın :) Aslında tekniği henüz yazdığım zaman denememiştim ve bu varsayımı bir yerden almış olmalıyım. Daha sonra bir <script>etiket içindeki her şeyin tarayıcı tarafından yok sayılacağını öğrendim .. Beni düzelttiğiniz için teşekkürler!

— ximo