Kode html sebagai sumber IFRAME, bukan URL

122

Kode standar untuk IFRAME ini, apakah ada cara untuk mengganti URL src dengan kode html Just? jadi masalah saya sederhana, saya memiliki halaman yang memuat badan HTML dari MYSQL. Saya ingin menyajikan kode itu dalam bingkai sehingga membuatnya mandiri dari sisa halaman dan dalam batas-batas khusus itu.

<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe>
html iframe frame Max
sumber

Jawaban:

149

Anda dapat melakukannya dengan URL data. Ini mencakup seluruh dokumen dalam satu string HTML. Misalnya, HTML berikut:

<html><body>foo</body></html>

dapat dikodekan seperti ini:

data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E

dan kemudian ditetapkan sebagai srcatribut iframe. Contoh .

Sunting: Alternatif lain adalah melakukan ini dengan Javascript. Ini hampir pasti teknik yang akan saya pilih. Anda tidak dapat menjamin berapa lama URL data yang akan diterima browser. Teknik Javascript akan terlihat seperti ini:

var iframe = document.getElementById('foo'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = 'Hello world';

Contoh

Sunting 2 (Desember 2017) : gunakan atribut srcdoc Html5 , seperti dalam jawaban Saurabh Chandra Patel , yang sekarang seharusnya menjadi jawaban yang diterima! Jika Anda dapat mendeteksi IE / Edge secara efisien , tipnya adalah menggunakan pustaka srcdoc-polyfill hanya untuk mereka dan atribut srcdoc "murni" di semua browser non-IE / Edge (periksa caniuse.com untuk memastikan).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
lonesomeday
sumber
5
Dukungan penjelajah Internet? URI Data tidak dapat mewakili file html di IE8
franzlorenzon
1
Apakah ada cara untuk menyediakan tajuk lintas asal di sini? Chrome terus mengeluh Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.
jozxyqk
1
@AndrewSwan Saya tidak begitu mengerti masalah dengan tanda kutip tunggal. Bisakah Anda memberi saya contoh?
Septagram
5
Bagi siapa pun seperti saya yang mencari cara menyandikan HTML dengan cara ini dengan php, Anda ingin rawurlencode ( php.net/manual/en/function.rawurlencode.php )
Braiba
4
Perhatikan bahwa jika Anda menggunakan innerHTMLbrowser tidak akan mengeksekusi tag skrip turunan. Untuk informasi lebih lanjut, periksa bagian Pertimbangan keamanan dari halaman MDN Element.innerHTML.
Leonid Vasilev
92

gunakan html5atribut baru srcdoc(srcdoc-polyfill) Docs 

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

Dukungan browser - Diuji di browser berikut:

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), 50
Saurabh Chandra Patel
sumber
1
Terima kasih! Saya memerlukan solusi untuk tampilan web webkit modern, dan sejauh ini itulah cara termudah untuk melakukannya!
Antoine Bolvy
1
Ini tidak didukung di IE
Bung
1
CanIUse.com mengatakan bahwa dukungan ini cukup miskin: caniuse.com/#search=srcdoc
msquitieri
5
@msquitieri Tidak, katanya dukungan asli buruk, bukan polyfill.
Walf
1
Tapi ini rusak segera setelah Anda mulai menggunakan tanda kutip
Agil
21

Menurut W3Schools, HTML 5 memungkinkan Anda melakukan ini menggunakan atribut "srcdoc" baru , tetapi dukungan browser tampaknya sangat terbatas.

Andrew Swan
sumber
4
Ada juga Polyfill untuk srcdoc .
Uwe Keim
2
@UweKeim Terima kasih telah menyarankan polyfill. Ringan dan berfungsi dengan baik.
The Muffin Man
1
Menurut caniuse.com, hanya browser IE dan Edge Microsoft yang terkenal (selain Opera Mini) yang tidak mendukung atribut srcdoc , jadi TIDAK "sangat terbatas". Cukup gunakan srcdoc-polyfill untuk pengguna Microsoft.
Heitor