Initial commit

jugglinmike · Jun 13, 2012 · f12c598 · f12c598
commit f12c598
Show file tree

Hide file tree

Showing 12 changed files with 16,345 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+*.swp
+*~
diff --git a/grunt.js b/grunt.js
@@ -0,0 +1,59 @@
+/*global module:false*/
+module.exports = function(grunt) {
+
+	// Project configuration.
+	grunt.initConfig({
+		meta: {
+			version: '0.1.0',
+			banner: '/*! srcdoc-polyfill - v<%= meta.version %> - ' +
+				'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
+				'* http://github.com/jugglinmike/srcdoc-polyfill/\n' +
+				'* Copyright (c) <%= grunt.template.today("yyyy") %> ' +
+				'Mike Pennisi; Licensed MIT */'
+		},
+		lint: {
+			files: ['grunt.js', 'srcdoc-polyfill.js']
+		},
+		qunit: {
+			files: ['test/**/*.html']
+		},
+		concat: {
+			dist: {
+				src: ['<banner:meta.banner>', '<file_strip_banner:srcdoc-polyfill.js>'],
+				dest: 'srcdoc-polyfill-<%= meta.version %>.min.js'
+			}
+		},
+		min: {
+			dist: {
+				src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],
+				dest: 'srcdoc-polyfill-<%= meta.version %>.min.js'
+			}
+		},
+		watch: {
+			files: '<config:lint.files>',
+			tasks: 'lint qunit'
+		},
+		jshint: {
+			options: {
+				curly: true,
+				eqeqeq: true,
+				immed: true,
+				latedef: true,
+				newcap: true,
+				noarg: true,
+				sub: true,
+				undef: true,
+				boss: true,
+				eqnull: true,
+				browser: true,
+				// The shim relies on script URLs to function
+				scripturl: true
+			}
+		},
+		uglify: {}
+	});
+
+	// Default task.
+	grunt.registerTask('default', 'lint qunit concat min');
+
+};
diff --git a/readme.md b/readme.md
@@ -0,0 +1,70 @@
+# `srcdoc` polyfill
+
+HTML5 defines a new attribute for iFrames named	`srcdoc`. This attribute allows
+developers to specify an iFrame's content in-line with the iFrame itself. For
+instance:
+
+	<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
+
+As of June 2012, this feature is not available in any (stable) browsers.
+Fortunately, most of today's browsers support similar functionality through
+script-targeted URLs, i.e.
+
+	<iframe src="javascript: '<html><body>Hello, <b>world</b>.</body></html>'"></iframe>
+
+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/).
+
+## Usage
+
+By including the script at the bottom of the document `<body>`, any available
+iFrames which declare a `srcdoc` attribute attribute) will receive this
+"shimmed" behavior. (In browsers that already implement this functionality, no
+change will take place.)
+
+The shim also defines a `srcDoc` variable in the global scope:
+
+* `srcDoc.set( iframe [, content] )` - sets the content of the provided iFrame
+  element using the `srcdoc` attribute where available (falling back on a
+  script-targeted URL in non-supporting browsers). The desired content of the
+  iFrame may optionally be specified. If blank, the current value of the
+  element's `srcdoc` attribute will be referenced for content.
+* `srcDoc.noConflict()` - Sets the value of the global `srcDoc` variable to its
+  original value. Returns the `srcDoc` object defined by this project for
+  re-aliasing.
+
+## Browser Support
+
+Tested in the following browsers:
+
+* Microsoft Internet Explorer
+  * 6, 7, 8, 9, 10.0.8102.0 (developer preview)
+* Safari
+  * 4, 5.0, 5.1
+* Google Chrome
+  * 14, 15, 16, 17, 18, 19, 20
+* Opera
+  * 11.1, 11.5, 11.6, 12 (beta)
+* Mozilla FireFox
+  * 3.6, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 (beta)
+
+The following browsers are *not* supported:
+
+* Opera 10.0
+
+## Building
+
+The build process for this project is written with
+[Grunt.js](http://gruntjs.com). Please refer to the grunt documentation for
+details on installing grunt.
+
+## Tests
+
+The shim's tests are written in QUnit, and can be run by visiting the
+`test/index.html` file in the browser, or by running `grunt qunit` from the
+command line.
+
+## License
+
+Copyright (c) 2012 Mike Pennisi  
+Licensed under the MIT license.
diff --git a/srcdoc-polyfill-0.1.0.min.js b/srcdoc-polyfill-0.1.0.min.js
diff --git a/srcdoc-polyfill.js b/srcdoc-polyfill.js
@@ -0,0 +1,70 @@
+(function( window, document, undefined ) {
+
+	var idx, iframes;
+	var _srcDoc = window._srcDoc;
+	var isCompliant = !!("srcdoc" in document.createElement("iframe"));
+	var implementations = {
+		compliant: function( iframe, content ) {
+
+			if (content) {
+				iframe.setAttribute("srcdoc", content);
+			}
+		},
+		legacy: function( iframe, content ) {
+
+			var jsUrl;
+
+			if (!iframe || !iframe.getAttribute) {
+				return;
+			}
+
+			if (!content) {
+				content = iframe.getAttribute("srcdoc");
+			}
+
+			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") +
+					"'";
+
+				iframe.setAttribute("src", jsUrl);
+
+				// Explicitly set the iFrame's window.location for
+				// compatability with IE9, which does not react to changes in
+				// the `src` attribute when it is a `javascript:` URL, for
+				// some reason
+				if (iframe.contentWindow) {
+					iframe.contentWindow.location = jsUrl;
+				}
+			}
+		}
+	};
+	var srcDoc = window.srcDoc = {
+		// Assume the best
+		set: implementations.compliant,
+		noConflict: function() {
+			window.srcDoc = _srcDoc;
+			return srcDoc;
+		}
+	};
+
+	// If the browser supports srcdoc, no shimming is necessary
+	if (isCompliant) {
+		return;
+	}
+
+	srcDoc.set = implementations.legacy;
+
+	// Automatically shim any iframes already present in the document
+	iframes = document.getElementsByTagName("iframe");
+	idx = iframes.length;
+
+	while (idx--) {
+		srcDoc.set( iframes[idx] );
+	}
+
+}( this, this.document ));
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Srcdoc-polyfill Test Suite</title>
+
+        <!-- Test framework -->
+        <link rel="stylesheet" href="lib/qunit-1.5.0.css" />
+        <script src="lib/qunit-1.5.0.js"></script>
+        <script src="lib/jquery-1.7.2.js"></script>
+
+        <!-- Source files -->
+        <script src="../srcdoc-polyfill.js"></script>
+    </head>
+    <body>
+        <div id="qunit"></div>
+
+		<div id="qunit-fixture"></div>
+
+        <!-- Test files -->
+        <script src="tests.js"></script>
+    </body>
+</html>