Iframe
Travailler de façon modulaire est devenu une question de survie pour maintenir un projet sur le long terme et les Iframe bien souvent trop sous-estimé peuvent vous permettre de diviser votre site en sous modules. Le but et de développer son site en plusieurs parties et de les inclures en tant que iframe.
Comment adapter un iframe en fonction de son contenu ?
iframe.src = this.getAttribute('data-url')
iframe.onload = function()
{
var body = this.contentWindow.document.body
var html = this.contentWindow.document.documentElement
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
console.log(height)
this.height = height
// On attend un signal de resize pour changer la taille de l'iframe
var self = this
window.addEventListener('message', function(e) {
var eventName = e.data[0];
switch(eventName) {
case 'resize':
var height = Math.max( body.scrollHeight, body.offsetHeight, html.offsetHeight )
self.height = height
break;
}
}, false);
}
Dans l’iframe sur l’event il faut signaler le resize
window.parent.postMessage(["resize"], "*");