Swap style sheets in iFrame contents based on parent window size

Posted on by

For child documents that have the same hostname as the parent iframe document, you can use javascript to change stylesheets or other elements of the DOM on the child based on information sent from the parent.

But for two documents that have different hostname or ports, you will need to use different techniques to transmit information on the client-side, because cross-site scripting is forbidden by modern browsers.

But if your two documents are using the same hostname, and you have control over both, add this javascript in the head of the iFrame content document (the child document).


if (window.parent.screen.height >= 700) {
document.write('%3Clink%20rel%3D%22stylesheet%22%20href%3D%22%2F%2Fmydomain.com%2Fnarrowstyles.css%22%20%2F%3E%0A');
} else {
document.write('%0A%3Clink%20rel%3D%22stylesheet%22%20href%3D%22%2F%2Fmydomain.com%2Fwidestyles.css%22%20%2F%3E%0A');
}

Of course this could be used for redoing the styles of the iFrame contents based on any other property of the parent document as well. For example you could use


parent.document.body.some.property= "[some value]"

instead of


window.parent.screen.height