Add support for content of arbitrary length

Browsers implement varying limits on the length of URLs. Internet Explorer 8, for instance, does not support URLs longer than 2,083 characters[1]. In browsers that do not support the `srcdoc` attribute, store the content in iFrames' `srcdoc` attribute and use the script-targeted URL to access the attribute value. [1] http://support.microsoft.com/kb/208427
jugglinmike · Mar 2, 2013 · 89e3344 · 89e3344
1 parent 530b641
commit 89e3344
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 8 deletions.
diff --git a/readme.md b/readme.md
@@ -12,6 +12,9 @@ script-targeted URLs, i.e.
 
 	<iframe src="javascript: '<html><body>Hello, <b>world</b>.</body></html>'"></iframe>
 
+(Because of limitations on URL length, the actual mechanism that the polyfill
+implements not quite this direct.)
+
 For more on `srcdoc`, see [the WhatWG specification](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-srcdoc) and [this post on
 Bocoup.com](http://weblog.bocoup.com/third-party-javascript-development-future/).
 

diff --git a/srcdoc-polyfill.js b/srcdoc-polyfill.js
@@ -20,16 +20,15 @@
 
 			if (!content) {
 				content = iframe.getAttribute("srcdoc");
+			} else {
+				iframe.setAttribute("srcdoc", content);
 			}
 
 			if (content) {
-
-				// Create a "javascript: " URL. Wrap the content in quotes and
-				// escape unsafe characters (this is in addition to any
-				// escaping already done to sanitize the `srcdoc` attribute)
-				jsUrl = "javascript: '" +
-					content.replace(/([\\'])/g, "\\$1") +
-					"'";
+				// The value returned by a script-targeted URL will be used as
+				// the iFrame's content. Create such a URL which returns the
+				// iFrame element's `srcdoc` attribute.
+				jsUrl = "javascript: window.frameElement.getAttribute('srcdoc');";
 
 				iframe.setAttribute("src", jsUrl);
 

diff --git a/srcdoc-polyfill.min.js b/srcdoc-polyfill.min.js
diff --git a/test/tests.js b/test/tests.js
@@ -153,6 +153,30 @@ test("set content (as inferred from current `srcdoc` attribute) of src-ful iFram
 
 });
 
+/* Issue #2: Content length limited to 4080 chars in Internet Explorer
+ * Browsers enforce limits on the length of URLs (for instance, Internet
+ * Explorer 8 does not support URLs longer than 2,083 characters in length[1].
+ * Ensure that srcDoc operates even in cases where the content is far longer
+ * than the maximum-allowed URL length.
+ */
+test("set content longer than 4020 characters in length", 1, function() {
+
+	var $harness = this.$harness;
+	var content = new Array(5001).join("M");
+	var regex = /M{5000}/i;
+
+	stop();
+
+	$harness.one("load", function() {
+		ok(regex.test($harness.contents().children().html()),
+			"The iFrame contains the specified content");
+		start();
+	});
+
+	srcDoc.set($harness.get(0), content);
+
+});
+
 module("Automatic shimming", {
 	setup: function() {
 		this.$harness = $("<iframe>").appendTo("#qunit-fixture");