J'essaie de créer un iframe à partir de JavaScript et de le remplir avec du HTML arbitraire, comme ceci :
var html = '<body>Foo</body>';
var iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);Je m'attendrais iframe pour ensuite contenir une fenêtre et un document valides. Or, ce n'est pas le cas :
> console.log(iframe.contentWindow) ;
null
Essayez vous-même : http://jsfiddle.net/TrevorBurnham/9k9Pe/
Qu'est-ce que je néglige ?
L'approche par URL ne fonctionnera que pour les petits fragments HTML. L'approche la plus solide consiste à générer une URL d'objet à partir d'un blob et à l'utiliser comme source de l'iframe dynamique.
const html = '<html>...</html>';
const iframe = document.createElement('iframe');
const blob = new Blob([html], {type: 'text/html'});
iframe.src = window.URL.createObjectURL(blob);
document.body.appendChild(iframe);
Cette approche pose le problème suivant : la fenêtre du cadre sera un peu comme "blob" : example.com/83f3ac60-2cd9-42dd-b430-e1c09484009e "
Faites ceci
...
var el = document.getElementById('targetFrame');
var frame_win = getIframeWindow(el);
console.log(frame_win);
...getIframeWindow est défini ici
function getIframeWindow(iframe_object) {
var doc;
if (iframe_object.contentWindow) {
return iframe_object.contentWindow;
}
if (iframe_object.window) {
return iframe_object.window;
}
if (!doc && iframe_object.contentDocument) {
doc = iframe_object.contentDocument;
}
if (!doc && iframe_object.document) {
doc = iframe_object.document;
}
if (doc && doc.defaultView) {
return doc.defaultView;
}
if (doc && doc.parentWindow) {
return doc.parentWindow;
}
return undefined;
}
(function(){
var frame = document.createElement('iframe');
frame.src = 'https://1zr2h9xgfxqt.statuspage.io/embed/frame';
frame.style.position = 'fixed';
frame.style.border = 'none';
frame.style.boxShadow = '0 20px 32px -8px rgba(9,20,66,0.25)';
frame.style.zIndex = '9999';
frame.style.transition = 'left 1s ease, bottom 1s ease, right 1s ease';
var mobile;
if (mobile = screen.width < 450) {
frame.src += '?mobile=true';
frame.style.height = '20vh';
frame.style.width = '100vw';
frame.style.left = '-9999px';
frame.style.bottom = '-9999px';
frame.style.transition = 'bottom 1s ease';
} else {
frame.style.height = '115px';
frame.style.width = '320px';
frame.style.left = 'auto';
frame.style.right = '-9999px';
frame.style.bottom = '60px';
}
document.body.appendChild(frame);
var actions = {
showFrame: function() {
if (mobile) {
frame.style.left = '0';
frame.style.bottom = '0';
}
else {
frame.style.left = 'auto';
frame.style.right = '60px'
}
},
dismissFrame: function(){
frame.style.left = '-9999px';
}
}
window.addEventListener('message', function(event){
if (event.data.action && actions.hasOwnProperty(event.data.action)) {
actions[event.data.action](event.data);
}
}, false);
window.statusEmbedTest = actions.showFrame;})() ;
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.
10 votes
Notez que HTML5 a introduit un nouveau paramètre qui fait cela automatiquement : w3schools.com/tags/att_iframe_srcdoc.asp Le seul problème est la compatibilité des navigateurs...
0 votes
Duplicata possible de mettre du html dans un iframe (en utilisant javascript)