I have a parent document that is currently returning CSS1Compat from document.compatMode.
When I add a blank iframe with jQuery like this:
$("body").append("<iframe id='test-iframe'></iframe>");
and check the compatMode of the new iframe like this:
$("#test-iframe")[0].contentWindow.document.compatMode
it equals BackCompat
This is causing case sensitivity issues later on and some other styling problems. I can't change the cases and have no control over that. Shouldn't the new iframe be the same compatMode? Is there a way to force that?
This is because the browser is loading a basic html document (notice no doctype declaration):
<html>
<head></head>
<body></body>
</html>
Since there is no doctype declared Chrome will use BackCompat mode.
If you want it to be changed to a different mode either set the src url to a html page that uses a doctype declaration, or write to the iframe and set the html to one with a doctype.
var myContent = '<!DOCTYPE html><html><head></head><body></body></html>';
$("body").append("<iframe id='test-iframe'></iframe>");
var frame = $("#test-iframe")[0];
frame.contentWindow.document.open('text/htmlreplace');
frame.contentWindow.document.write(myContent);
frame.contentWindow.document.close();
console.log( frame.contentWindow.document.compatMode );
JSFiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With