Code HTML comme source IFRAME plutôt que comme URL

123

Ce code standard pour un IFRAME, y a-t-il un moyen de remplacer l'URL src par juste du code html? donc mon problème est simple, j'ai une page qui charge un corps HTML de MYSQL Je veux présenter ce code dans un cadre pour qu'il le rende indépendant du reste de la page et dans les limites de cette bordure spécifique.

<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
la source

Réponses:

150

Vous pouvez le faire avec une URL de données. Cela inclut le document entier dans une seule chaîne de HTML. Par exemple, le code HTML suivant:

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

peut être encodé comme ceci:

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

puis définissez comme srcattribut de l'iframe. Exemple .

Edit: L'autre alternative est de faire cela avec Javascript. C'est presque certainement la technique que je choisirais. Vous ne pouvez pas garantir la durée d'acceptation d'une URL de données par le navigateur. La technique Javascript ressemblerait à ceci:

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

iframedoc.body.innerHTML = 'Hello world';

Exemple

Edit 2 (décembre 2017) : utilisez les Html5 Html5 , tout comme dans la réponse de Saurabh Chandra Patel , qui devrait maintenant être la réponse acceptée! Si vous pouvez détecter efficacement IE / Edge , une astuce est d'utiliser la bibliothèque srcdoc-polyfill uniquement pour eux et l'attribut srcdoc "pur" dans tous les navigateurs non-IE / Edge (vérifiez caniuse.com pour être sûr).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
seul jour
la source
5
Prise en charge d'Internet Explorer? L'URI de données ne peut pas représenter les fichiers html dans IE8
franzlorenzon
1
Existe-t-il un moyen de fournir des en-têtes d'origine croisée ici? Chrome ne cesse de se plaindre Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.
jozxyqk
1
@AndrewSwan Je ne comprends pas très bien le problème des guillemets simples. Peux-tu me donner un exemple?
Septagram
5
Pour tous ceux qui, comme moi, cherchaient comment encoder du HTML de cette façon avec php, vous voulez rawurlencode ( php.net/manual/en/function.rawurlencode.php )
Braiba
4
Notez que si vous utilisez le innerHTMLnavigateur, il n'exécutera pas les balises de script descendantes. Pour plus d'informations, consultez la section Considérations sur la sécurité de la page MDN Element.innerHTML.
Leonid Vasilev
92

utiliser html5le nouvel attribut de srcdoc(srcdoc-polyfill) Docs 

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

Prise en charge du navigateur - Testé dans les navigateurs suivants:

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
la source
1
Merci ! J'avais besoin d'une solution pour une vue Web moderne du kit Web, et c'était de loin le moyen le plus simple de le faire!
Antoine Bolvy
1
Il n'est pas pris en charge dans IE
dude
1
CanIUse.com dit que le support est assez pauvre: caniuse.com/#search=srcdoc
msquitieri
5
@msquitieri Non, il dit que le support natif est médiocre, pas celui du polyfill.
Walf
1
Mais cela casse dès que vous commencez à utiliser des guillemets
Agil
21

Selon W3Schools, HTML 5 vous permet de le faire en utilisant un nouvel attribut "srcdoc" , mais le support du navigateur semble très limité.

Andrew Swan
la source
4
Il existe également un Polyfill pour srcdoc .
Uwe Keim
2
@UweKeim Merci d'avoir suggéré le polyfill. Il est léger et fonctionne très bien.
The Muffin Man
1
Selon caniuse.com, seuls les fameux navigateurs IE et Edge de Microsoft (à part Opera Mini) ne prennent pas en charge l' attribut srcdoc , il n'est donc PAS "très limité". Utilisez simplement srcdoc-polyfill pour les utilisateurs Microsoft.
Heitor