Fix #12018, readyState "interactive" in oldIE lies! Closes gh-848.

jquery · Jul 6, 2012 · f5fd41252e3ae48a655c5da4a0b2910bb897b6ed · f5fd412
1 parent aaf134b
commit f5fd41252e3ae48a655c5da4a0b2910bb897b6ed
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 34 deletions.
diff --git a/src/core.js b/src/core.js
@@ -63,12 +63,13 @@ var
 	DOMContentLoaded = function() {
 		if ( document.addEventListener ) {
 			document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
-		} else {
-			// we're here because readyState !== "loading" in oldIE
+			jQuery.ready();
+		} else if ( document.readyState === "complete" ) {
+			// we're here because readyState === "complete" in oldIE
 			// which is good enough for us to call the dom ready!
 			document.detachEvent( "onreadystatechange", DOMContentLoaded );
+			jQuery.ready();
 		}
-		jQuery.ready();
 	},
 
 	// [[Class]] -> type pairs
@@ -818,7 +819,7 @@ jQuery.ready.promise = function( obj ) {
 
 		// Catch cases where $(document).ready() is called after the
 		// browser event has already occurred.
-		if ( document.readyState !== "loading" ) {
+		if ( document.readyState === "complete" || ( document.readyState !== "loading" && document.addEventListener ) ) {
 			// Handle it asynchronously to allow scripts the opportunity to delay ready
 			setTimeout( jQuery.ready, 1 );
 

diff --git a/test/data/event/asyncReady.html b/test/data/event/asyncReady.html
@@ -4,27 +4,26 @@
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Test case for jQuery ticket #10067</title>
 <script type="text/javascript">
-if ( document.attachEvent ) {
-	// browsers that use the non-standard event API will load the iframe
-	// before jQuery, so there's no way to fire ready before the iframe loads
-	window.parent.iframeCallback( true );
-} else {
-	setTimeout(function() {
-		el = document.createElement("script");
-		el.type = "text/javascript";
-		el.onload = function() {
-			jQuery( document ).ready(function() {
-				jQuery("body").append("<div>modifying DOM</div>");
-				window.parent.iframeCallback( true );
-			});
-		}
-		document.getElementsByTagName("head")[ 0 ].appendChild( el );
-		el.src = "../../../dist/jquery.js";
-	}, 1000 );
-}
+setTimeout(function() {
+	el = document.createElement("script");
+	el.type = "text/javascript";
+	el.onload = function() {
+		jQuery( document ).ready(function() {
+			window.parent.iframeCallback( jQuery('#container').length === 1 );
+		});
+	}
+	document.getElementsByTagName("head")[ 0 ].appendChild( el );
+	el.src = "../../../dist/jquery.js";
+}, 1000 );
 </script>
 </head>
 <body>
+
+<!-- external resources that come before elements trick
+oldIE into thinking the dom is ready, but it's not... -->
+<script type="text/javascript" src="longLoadScript.php?sleep=1"></script>
+<div id="container" style="height: 300px"></div>
+
 <!-- long loading iframe -->
 <iframe src="longLoad.php?sleep=15&return=false" style="width: 1px; height: 1px"></iframe>
 </body>

diff --git a/test/data/event/longLoadScript.php b/test/data/event/longLoadScript.php
@@ -0,0 +1,4 @@
+<?php
+sleep((int)$_GET['sleep']);
+header('Content-type: text/javascript');
+?>
diff --git a/test/data/event/promiseReady.html b/test/data/event/promiseReady.html
@@ -12,6 +12,6 @@
 </script>
 </head>
 <body>
-<!-- long loading iframe -->
+<!-- empty body -->
 </body>
 </html>
diff --git a/test/data/event/syncReady.html b/test/data/event/syncReady.html
@@ -6,13 +6,18 @@
 <script type="text/javascript" src="../../../dist/jquery.js"></script>
 </head>
 <body>
+
 <script type="text/javascript">
 jQuery( document ).ready(function () {
-	jQuery("body").append("<div>modifying DOM</div>");
-	window.parent.iframeCallback( true );
+	window.parent.iframeCallback( jQuery('#container').length === 1 );
 });
 </script>
-<!-- long loading iframe -->
-<iframe src="longLoad.php?sleep=10&return=false" style="width: 1px; height: 1px"></iframe>
+
+<!-- external resources that come before elements trick
+	oldIE into thinking the dom is ready, but it's not...
+	leaving this check here for future trailblazers to attempt
+	fixing this...-->
+<script type="text/javascript" src="longLoadScript.php?sleep=1"></script>
+<div id="container" style="height: 300px"></div>
 </body>
 </html>
diff --git a/test/data/event/syncReadyLongLoad.html b/test/data/event/syncReadyLongLoad.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Test case for jQuery ticket #10067</title>
+<script type="text/javascript" src="../../../dist/jquery.js"></script>
+</head>
+<body>
+
+<script type="text/javascript">
+jQuery( document ).ready(function () {
+	window.parent.iframeCallback( jQuery('#container').length === 1 );
+});
+</script>
+
+<!-- external resources that come before elements trick
+	oldIE into thinking the dom is ready, but it's not...
+	leaving this check here for future trailblazers to attempt
+	fixing this...-->
+<script type="text/javascript" src="longLoadScript.php?sleep=1"></script>
+<div id="container" style="height: 300px"></div>
+
+<!-- long loading iframe -->
+<iframe src="longLoad.php?sleep=10&return=false" style="width: 1px; height: 1px"></iframe>
+</body>
+</html>
diff --git a/test/unit/event.js b/test/unit/event.js
@@ -2345,7 +2345,7 @@ test("jQuery.off using dispatched jQuery.Event", function() {
 test( "delegated event with delegateTarget-relative selector (#)", function() {
 	expect(1);
 	var markup = jQuery( '<ul><li><ul id="u1"><li id="f1"></li></ul></li>' ).appendTo("body");
-	
+
 	markup
 		.find("#u1")
 			.on( "click", "li:first", function() {
@@ -2884,14 +2884,22 @@ if ( hasPHP ) {
 		ok( isOk, "$.when( $.ready ) works" );
 	});
 
-	testIframeWithCallback( "jQuery.ready synchronous load with long loading iframe", "event/syncReady", function( isOk ) {
-		expect(1);
-		ok( isOk, "jQuery loaded synchronously fires ready before all sub-resources are loaded" );
-	});
+	// oldIE needs all subresources to be loaded before it can gaurantee the document is truly ready to be interacted with
+	if( document.addEventListener ) {
+		testIframeWithCallback( "jQuery.ready synchronous load with long loading iframe", "event/syncReadyLongLoad", function( isOk ) {
+			expect(1);
+			ok( isOk, "jQuery loaded synchronously fires ready before all sub-resources are loaded" );
+		});
+
+		testIframeWithCallback( "jQuery.ready asynchronous load with long loading iframe", "event/asyncReady", function( isOk ) {
+			expect(1);
+			ok( isOk, "jQuery loaded asynchronously fires ready before all sub-resources are loaded" );
+		});
+	}
 
-	testIframeWithCallback( "jQuery.ready asynchronous load with long loading iframe", "event/asyncReady", function( isOk ) {
+	testIframeWithCallback( "jQuery.ready synchronous load with long loading subresources", "event/syncReady", function( isOk ) {
 		expect(1);
-		ok( isOk, "jQuery loaded asynchronously fires ready before all sub-resources are loaded" );
+		ok( isOk, "jQuery loaded synchronously fires ready when the DOM can truly be interacted with" );
 	});
 }