Ce code standard pour un IFRAME, existe-t-il un moyen de remplacer l'URL src par un simple code html ? 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 qu'il soit rendu indépendamment du reste de la page et dans les limites de ce cadre spécifique.
<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe>Vous pouvez le faire avec une URL de données. Celle-ci inclut l'ensemble du document dans une seule chaîne de caractères HTML. Par exemple, le HTML suivant :
<html><body>foo</body></html>peut être codé comme ceci :
data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3Eet ensuite fixé comme src de l'iframe. Ejemplo .
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 longueur de l'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';Édition 2 (décembre 2017) : utiliser les Html5's srcdoc tout comme dans Saurabh Chandra Patel qui devrait maintenant être la réponse acceptée ! Si vous pouvez détecter efficacement IE/Edge un conseil est d'utiliser 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>
Utiliser html5 Le nouvel attribut de l'UE srcdoc (srcdoc-polyfill) Docs
<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>Prise en charge des navigateurs - 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
Merci ! J'avais besoin d'une solution pour une webview webkit moderne, et c'était de loin la façon la plus simple de le faire !
Selon W3Schools, HTML 5 vous permet de le faire à l'aide d'une nouvel attribut "srcdoc mais le support du navigateur semble très limité.
Selon caniuse.com seulement les navigateurs infâmes IE et Edge de Microsoft (en plus d'Opera Mini) ne supportent pas l'option srcdoc donc il n'est PAS "très limité". Utilisez simplement srcdoc-polyfill pour les utilisateurs de Microsoft.
J'ai une page qui charge un corps HTML à partir de MYSQL. Je veux présenter ce code dans un cadre afin qu'il soit rendu indépendamment du reste de la page et dans les limites de ce cadre spécifique.
Un site object avec un dataUri non codé aurait également pu répondre à votre besoin s'il s'agissait uniquement de charger une partie du texte des données :
Le HTML
<object>représente une ressource externe, qui peut être traitée comme une image, un contexte de navigation imbriqué ou une ressource à gérer par un plugin.
body {display:flex;min-height:25em;}
p {margin:auto;}
object {margin:0 auto;background:lightgray;}
<p>here My uploaded content: </p>
<object data='data:text/html,
<style>
.table {
display: table;
text-align:center;
width:100%;
height:100%;
}
.table > * {
display: table-row;
}
.table > main {
display: table-cell;
height: 100%;
vertical-align: middle;
}
</style>
<div class="table">
<header>
<h1>Title</h1>
<p>subTitle</p>
</header>
<main>
<p>Collection</p>
<p>Version</p>
<p>Id</p>
</main>
<footer>
<p>Edition</p>
</footer>'>
</object>Mais en gardant votre idée d'Iframe, vous pourriez également charger votre HTML à l'intérieur de votre balise iframe et le définir comme valeur srcdoc. Vous ne devriez pas avoir à vous soucier des citations ni à le transformer en dataUri mais seulement à vous soucier de déclencher onload une fois.
L'élément HTML Inline Frame (
<iframe>) représente un contexte de navigation imbriqué, intégrant une autre page HTML dans la page actuelle.
Les deux iframe ci-dessous auront le même rendu, l'un d'entre eux nécessite du javascript supplémentaire.
exemple de chargement d'un document complet :
body {
display: flex;
min-height: 25em;
}
p {
margin: auto;
}
iframe {
margin: 0 auto;
min-height: 100%;
background:lightgray;
}
<p>here my uploaded contents =>:</p>
<iframe srcdoc='<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
html, body {
height: 100%;
margin:0;
}
body.table {
display: table;
text-align:center;
width:100%;
}
.table > * {
display: table-row;
}
.table > main {
display: table-cell;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body class="table">
<header>
<h1>title</h1>
<p>injected via <code>srcdoc</code></p>
</header>
<main>
<p>Collection</p>
<p>Version</p>
<p>Id</p>
</main>
<footer>
<p>Edition</p>
</footer>
</body>
</html>'>
</iframe>
<iframe onload="this.setAttribute('srcdoc', this.innerHTML);this.setAttribute('onload','')">
<!-- below html loaded -->
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style>
html,
body {
height: 100%;
margin: 0;
overflow:auto;
}
body.table {
display: table;
text-align: center;
width: 100%;
}
.table>* {
display: table-row;
}
.table>main {
display: table-cell;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body class="table">
<header>
<h1>Title</h1>
<p>Injected from <code>innerHTML</code></p>
</header>
<main>
<p>Collection</p>
<p>Version</p>
<p>Id</p>
</main>
<footer>
<p>Edition</p>
</footer>
</body>
</html>
</iframe>
iframe srcdoc : Cet attribut contient HTML qui remplacera le contenu src attribut. Si un navigateur ne prend pas en charge l'attribut srcdoc il se rabattra sur l'URL dans l'attribut src attribut.
Comprenons-le à l'aide d'un exemple
<iframe
name="my_iframe"
srcdoc="<h1 style='text-align:center; color:#9600fa'>Welcome to iframes</h1>"
src="https://www.birthdaycalculatorbydate.com/"
width="500px"
height="200px"
></iframe>Le contenu original est tiré de iframes .
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
