web-dev-qa-db-fra.com

Code HTML en tant que source IFRAME plutôt qu'en tant qu'URL

Ce code standard pour un IFRAME, existe-t-il un moyen de remplacer l’URL src par un code HTML? donc mon problème est simple, j'ai une page qui charge un corps HTML à partir de MYSQL. Je veux présenter ce code dans un cadre afin de le rendre indépendant du reste de la page et dans les limites de son bord spécifique.

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

Vous pouvez le faire avec une URL de données. Cela inclut l'ensemble du document dans une seule chaîne de code 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éfini comme attribut src 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 pendant combien de temps une URL de données que le navigateur acceptera. La technique Javascript ressemblerait à quelque chose comme ceci:

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

iframedoc.body.innerHTML = 'Hello world';

Exemple

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

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

utilisez html5 srcdoc-polyfill Docs

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

Support du navigateur

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
69
Saurabh Chandra Patel

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

19
Andrew Swan