Bir IFRAME için bu standart kod, src URL'sini Yalnızca html koduyla değiştirmenin bir yolu var mı? bu yüzden benim sorunum basit, MYSQL'den bir HTML gövdesi yükleyen bir sayfam var. Bu kodu bir çerçevede sunmak istiyorum, böylece onu sayfanın geri kalanından bağımsız ve bu belirli sınırlamanın sınırları içinde kılar.
<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe> Yanıtlar:
Bunu bir veri URL'si ile yapabilirsiniz. Bu, tek bir HTML dizesindeki tüm belgeyi içerir. Örneğin, aşağıdaki HTML:
<html><body>foo</body></html>şu şekilde kodlanabilir:
data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3Eve sonra srciframe'in özniteliği olarak ayarlayın . Örnek .
Düzenleme: Diğer alternatif, bunu Javascript ile yapmaktır. Bu neredeyse kesinlikle seçeceğim teknik. Tarayıcının ne kadar süreyle bir veri URL'sini kabul edeceğini garanti edemezsiniz. Javascript tekniği şuna benzer:
var iframe = document.getElementById('foo'),
iframedoc = iframe.contentDocument || iframe.contentWindow.document;
iframedoc.body.innerHTML = 'Hello world';Düzenleme 2 (Aralık 2017) : Html5'in srcdoc özniteliğini kullanın, tıpkı Saurabh Chandra Patel'in cevabında olduğu gibi, şimdi kabul edilen cevap kim olmalı! IE / Edge'i verimli bir şekilde tespit edebiliyorsanız , srcdoc-polyfill kitaplığını yalnızca onlar için ve tüm IE / Edge olmayan tarayıcılarda "saf" srcdoc niteliğini kullanmak için bir ipucu ( emin olmak için caniuse.com'u kontrol edin ).
<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.
innerHTMLtarayıcıyı soyundan komut dosyası etiketleri çalıştırmaz. Daha fazla bilgi için Element.innerHTML MDN sayfasının Güvenlik konuları bölümünü kontrol edin .
kullanmak html5'in yeni özellik srcdoc(srcdoc-polyfill) Dokümanlar
<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>Tarayıcı desteği - Aşağıdaki tarayıcılarda test edilmiştir:
Microsoft Internet Explorer
6, 7, 8, 9, 10, 11
Microsoft Edge
13, 14
Safari
4, 5.0, 5.1 ,6, 6.2, 7.1, 8, 9.1, 10
Google Chrome
14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24.0.1312.5 (beta), 25.0.1364.5 (dev), 55
Opera
11.1, 11.5, 11.6, 12.10, 12.11 (beta) , 42
Mozilla FireFox
3.0, 3.6, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 (beta), 50W3Schools'a göre, HTML 5 bunu yeni bir "srcdoc" özniteliği kullanarak yapmanıza izin verir , ancak tarayıcı desteği çok sınırlı görünmektedir.