Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamic iframe inserted into document that is standards mode defaults to quirks mode

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?

like image 998
crickeys Avatar asked Jan 21 '26 08:01

crickeys


1 Answers

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

like image 113
Patrick Evans Avatar answered Jan 23 '26 22:01

Patrick Evans