├── COPYING
├── README.textile
├── innershiv.js
├── innershiv.src.js
└── test.html


/COPYING:
--------------------------------------------------------------------------------
 1 |            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
 2 |                    Version 2, December 2004
 3 | 
 4 | Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
 5 | 
 6 | Everyone is permitted to copy and distribute verbatim or modified
 7 | copies of this license document, and changing it is allowed as long
 8 | as the name is changed.
 9 | 
10 |            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
11 |   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
12 | 
13 |  0. You just DO WHAT THE FUCK YOU WANT TO.
14 | 


--------------------------------------------------------------------------------
/README.textile:
--------------------------------------------------------------------------------
 1 | h1. STOP! You don't need this!
 2 | 
 3 | **STOP, I SAY!** Instead of implementing innerShiv, please check out the new html5shiv from aFarkas and jonathantneal. Their updated shim patches for the same issues innerShiv addresses, and makes innerShiv itself redundant.
 4 | 
 5 | "http://html5shiv.googlecode.com/":http://code.google.com/p/html5shiv/
 6 | 
 7 | **innerShiv is happily retired! Please do not disturb its peaceful slumber!**
 8 | 
 9 | h1. HTML5 innerShiv
10 | 
11 | Even with HTML5shim, this section won't be styled in IE < 9:
12 | 
13 | <pre>
14 | <code>
15 |   var s = document.createElement('div');
16 |   s.innerHTML = "<section>Hi!</section>";
17 |   document.body.appendChild(s);
18 | </code>
19 | </pre>
20 | 
21 | innerShiv is a workaround.
22 | 
23 | This is the verbose documentation. If you just want the skinny and the script, "go here!":http://jdbartlett.github.com/innershiv
24 | 
25 | h2. The Problem
26 | 
27 | The HTML5shim fixes styling static HTML5 documents in old IE, but its reach is limited to the document itself. HTML5 elements that are created _before_ they're appended to the document fall outside its tender and loving embrace. That's a common use case, and noticeable in libraries like jQuery when you try to .append() or .load() HTML5 content.
28 | 
29 | h2. A Solution
30 | 
31 | <pre>
32 | <code>
33 |   innerShiv("<section>html string</section>")
34 | </code>
35 | </pre>
36 | 
37 | innerShiv is a function which takes your HTML5 string and returns an IE-safe document fragment or element collection shim'd to work with old IE.
38 | 
39 | h2. On jQuery
40 | 
41 | When creating a jQuery object from innerShiv, you should pass a second parameter -- boolean false -- which instructs innerShiv to return an array of elements instead of a document fragment:
42 | 
43 | <pre>
44 | <code>
45 |   $(innerShiv("<section>html string</section>", false))
46 | </code>
47 | </pre>
48 | 
49 | This enables you to do further manipulation before inserting your content into the document. If the jQuery/collection return parameter is not passed, you cannot perform additional manipulations in jQuery.
50 | 
51 | A lot of people ask how to use innerShiv with jQuery's .load() method. "This gist":https://gist.github.com/735829 provides an alternative method .loadShiv(), which is based on and acts like jQuery's .load() but passes incoming HTML through innerShiv before adding anything to the DOM. "Download loadShiv separately":https://gist.github.com/735829 and add it to your project, then simply call .loadShiv() instead of .load().
52 | 
53 | If you're loading an entire content fragment straight into the document (i.e., if you're .load()ing into an element that's currently attached the already-shim'd document, and you're not including a selector in .load()'s url parameter), you don't need to use loadShiv or innerShiv. innerShiv is only needed when you're setting the innerHTML of an element outside the shim'd document, something jQuery has to do when using a selector on loaded content or when loading content into an element that's not attached to the document.
54 | 
55 | Please note that, to keep its filesize down, innerShiv doesn't provide all the robustness of jQuery's HTML parsing. For example, it strips inline scripts from the HTML without parsing them.
56 | 
57 | h2. License
58 | 
59 | This script is completely, totally, and utterly free. It comes without any warranty, to the extent permitted by applicable law. You can redistribute it and/or modify it under the terms of the Do What The Fuck You Want To Public License, Version 2, as published by Sam Hocevar. See "here":http://sam.zoy.org/wtfpl/COPYING for more details.
60 | 


--------------------------------------------------------------------------------
/innershiv.js:
--------------------------------------------------------------------------------
1 | // http://bit.ly/ishiv | WTFPL License
2 | window.innerShiv=function(){function h(c,e,b){return/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i.test(b)?c:e+"></"+b+">"}var c,e=document,j,g="abbr article aside audio canvas datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video".split(" ");return function(d,i){if(!c&&(c=e.createElement("div"),c.innerHTML="<nav></nav>",j=c.childNodes.length!==1)){for(var b=e.createDocumentFragment(),f=g.length;f--;)b.createElement(g[f]);b.appendChild(c)}d=d.replace(/^\s\s*/,"").replace(/\s\s*$/,"").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,"").replace(/(<([\w:]+)[^>]*?)\/>/g,h);c.innerHTML=(b=d.match(/^<(tbody|tr|td|col|colgroup|thead|tfoot)/i))?"<table>"+d+"</table>":d;b=b?c.getElementsByTagName(b[1])[0].parentNode:c;if(i===!1)return b.childNodes;for(var f=e.createDocumentFragment(),k=b.childNodes.length;k--;)f.appendChild(b.firstChild);return f}}();


--------------------------------------------------------------------------------
/innershiv.src.js:
--------------------------------------------------------------------------------
 1 | /* innerShiv: makes HTML5shim work on innerHTML & jQuery
 2 |  * http://jdbartlett.github.com/innershiv
 3 |  *
 4 |  * -----------------------------------------------------------------
 5 |  *
 6 |  * STOP! Instead of implementing innerShiv, please check out the new
 7 |  * html5shiv from aFarkas and jonathantneal. Their updated shim
 8 |  * patches for the same issues innerShiv addresses, and makes
 9 |  * innerShiv itself redundant. YOU DON'T NEED TO USE THIS CODE!
10 |  *
11 |  * http://html5shiv.googlecode.com/
12 |  *
13 |  * -----------------------------------------------------------------
14 |  *
15 |  * This program is free software. It comes without any warranty, to
16 |  * the extent permitted by applicable law. You can redistribute it
17 |  * and/or modify it under the terms of the Do What The Fuck You Want
18 |  * To Public License, Version 2, as published by Sam Hocevar. See
19 |  * http://sam.zoy.org/wtfpl/COPYING for more details.
20 |  */
21 | window.innerShiv = (function () {
22 | 	var div;
23 | 	var doc = document;
24 | 	var needsShiv;
25 | 	
26 | 	// Array of elements that are new in HTML5
27 | 	var html5 = 'abbr article aside audio canvas datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video'.split(' ');
28 | 	
29 | 	// Used to idiot-proof self-closing tags
30 | 	function fcloseTag(all, front, tag) {
31 | 		return (/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i).test(tag) ? all : front + '></' + tag + '>';
32 | 	}
33 | 	
34 | 	return function (
35 | 		html, /* string */
36 | 		returnFrag /* optional false bool */
37 | 	) {
38 | 		if (!div) {
39 | 			div = doc.createElement('div');
40 | 			
41 | 			// needsShiv if can't use HTML5 elements with innerHTML outside the DOM
42 | 			div.innerHTML = '<nav></nav>';
43 | 			needsShiv = div.childNodes.length !== 1;
44 | 			
45 | 			if (needsShiv) {
46 | 				// MSIE allows you to create elements in the context of a document
47 | 				// fragment. Jon Neal first discovered this trick and used it in his
48 | 				// own shimprove: http://www.iecss.com/shimprove/
49 | 				var shimmedFrag = doc.createDocumentFragment();
50 | 				var i = html5.length;
51 | 				while (i--) {
52 | 					shimmedFrag.createElement(html5[i]);
53 | 				}
54 | 				
55 | 				shimmedFrag.appendChild(div);
56 | 			}
57 | 		}
58 | 		
59 | 		html = html
60 | 			// Trim whitespace to avoid unexpected text nodes in return data:
61 | 			.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
62 | 			// Strip any scripts:
63 | 			.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
64 | 			// Fix misuses of self-closing tags:
65 | 			.replace(/(<([\w:]+)[^>]*?)\/>/g, fcloseTag)
66 | 			;
67 | 		
68 | 		// Fix for using innerHTML in a table
69 | 		var tabled;
70 | 		if (tabled = html.match(/^<(tbody|tr|td|th|col|colgroup|thead|tfoot)[\s\/>]/i)) {
71 | 			div.innerHTML = '<table>' + html + '</table>';
72 | 		} else {
73 | 			div.innerHTML = html;
74 | 		}
75 | 		
76 | 		// Avoid returning the tbody or tr when fixing for table use
77 | 		var scope;
78 | 		if (tabled) {
79 | 			scope = div.getElementsByTagName(tabled[1])[0].parentNode;
80 | 		} else {
81 | 			scope = div;
82 | 		}
83 | 		
84 | 		// If not in jQuery return mode, return child nodes array
85 | 		if (returnFrag === false) {
86 | 			return scope.childNodes;
87 | 		}
88 | 		
89 | 		// ...otherwise, build a fragment to return
90 | 		var returnedFrag = doc.createDocumentFragment();
91 | 		var j = scope.childNodes.length;
92 | 		while (j--) {
93 | 			returnedFrag.appendChild(scope.firstChild);
94 | 		}
95 | 		
96 | 		return returnedFrag;
97 | 	};
98 | }());
99 | 


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<meta charset=utf-8 />
  5 | 	<title>innerShiv Test Page</title>
  6 | 	
  7 | 	<style type="text/css">
  8 | 		body { background:#ffe273; color:#333; font:1em Helvetica,Arial,sans-serif; font-weight:lighter; line-height:1.4; margin:0 auto; max-width:40em; padding:40px 40px 0; }
  9 | 		h2 { font:1.6em Myriad Pro, Trebuchet MS, Arial, Sans-Serif; font-weight:lighter; margin:0; }
 10 | 		p { margin:0.8em 0; }
 11 | 		section { display:block; }
 12 | 		
 13 | 		.test { background:#f7f7f7; border:2px solid #efd263; display:block; margin-bottom:40px; padding:20px; }
 14 | 			.test div { }
 15 | 				.test div p { background:#b8292a; color:#fff; padding:10px; }
 16 | 				.test div section p { background:#4c9828; }
 17 | 				.test .error { background:#b8292a; }
 18 | 			.test table { border-collapse:collapse; border-color:#ffd000; border-spacing:0; border-style:solid; border-width:2px 0; width:100%; }
 19 | 				.test table td { padding:10px; }
 20 | 	</style>
 21 | 	
 22 | 	<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 23 | 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 24 | 	
 25 | 	<script>
 26 | 	// Wrapper for timing tests, etc.
 27 | 	var testRounds = 10;
 28 | 	function test (no, func) {
 29 | 		if (testRounds && window.console && console.log) {
 30 | 			var el = $('#test-' + no), original = el.clone(), time = new Date(), i = testRounds;
 31 | 			while (i--) func();
 32 | 			console.log('Test ' + no + ' completed. ' + testRounds + ' rounds took ' + ((new Date() - time) / 1000) + ' seconds.');
 33 | 			el.replaceWith(original);
 34 | 		}
 35 | 		
 36 | 		func();
 37 | 	}
 38 | 	</script>
 39 | 	
 40 | 	<script src="innershiv.src.js"></script>
 41 | </head>
 42 | <body>
 43 | 	<article>
 44 | 		<section class="test">
 45 | 			<h2>Test 1: innerHTML outside DOM (no innerShiv)</h2>
 46 | 			<p>This test determines whether your browser requires innerShiv.</p>
 47 | 			
 48 | 			<div id="test-1"></div>
 49 | 			<script>
 50 | 				test (1, function () {
 51 | 					var s = document.createElement('div');
 52 | 					s.innerHTML = "<section><p>If this paragraph's background is green, your browser does not require innerShiv.</p></section>";
 53 | 					document.getElementById('test-1').appendChild(s);
 54 | 				});
 55 | 			</script>
 56 | 		</section>
 57 | 		
 58 | 		<section class="test">
 59 | 			<h2>Test 2: jQuery append without innerShiv</h2>
 60 | 			<p>At some point, jQuery itself may include innerShiv's functionality. This test determines whether that's the case for the version of jQuery in use.</p>
 61 | 			
 62 | 			<div id="test-2"></div>
 63 | 			<script>
 64 | 				test (2, function () {
 65 | 					$('#test-2').append("<section><p>If this paragraph's background is green, your browser does not require innerShiv or jQuery includes innerShiv's functionality.</p></section>");
 66 | 				});
 67 | 			</script>
 68 | 		</section>
 69 | 		
 70 | 		<section class="test">
 71 | 			<h2>Test 3: innerShiv outside DOM</h2>
 72 | 			<p>This test uses innerShiv with appendChild to add a &lt;section&gt; an element's HTML outside the DOM.</p>
 73 | 			
 74 | 			<div id="test-3"></div>
 75 | 			<script>
 76 | 				test (3, function () {
 77 | 					var s = document.createElement('div');
 78 | 					s.appendChild(innerShiv("<section><p>This paragraph should have a green background.</p></section>"));
 79 | 					document.getElementById('test-3').appendChild(s);
 80 | 				});
 81 | 			</script>
 82 | 		</section>
 83 | 		
 84 | 		<section class="test">
 85 | 			<h2>Test 4: jQuery append with innerShiv</h2>
 86 | 			<p>This test uses innerShiv with jQuery to append a &lt;section&gt; to an element.</p>
 87 | 			
 88 | 			<div id="test-4"></div>
 89 | 			<script>
 90 | 				test (4, function () {
 91 | 					$('#test-4').append(innerShiv("<section><p>This paragraph should have a green background.</p></section>"));
 92 | 				});
 93 | 			</script>
 94 | 		</section>
 95 | 		
 96 | 		<section class="test">
 97 | 			<h2>Test 5: jQuery manipulation of innerShiv'd content</h2>
 98 | 			<p>This tests innerShiv's jQuery Return Mode, which returns an array of elements instead of a DOM fragment.</p>
 99 | 			
100 | 			<div id="test-5"></div>
101 | 			<script>
102 | 				test (5, function () {
103 | 					$('#test-5').append($(innerShiv("<section><p class=\"error\">This paragraph should have a green background.</p></section>", false)).find('p').removeClass('error').end());
104 | 				});
105 | 			</script>
106 | 		</section>
107 | 		
108 | 		<section class="test">
109 | 			<h2>Test 6: edge cases &amp; idiot proofing</h2>
110 | 			<p>This tests innerShiv's ability to cope with elements inside tables, with incorrectly used empty tags, and to strip scripts and whitespace surrounding the HTML.</p>
111 | 			<p>The table below should contain two rows:</p>
112 | 			
113 | 			<table>
114 | 				<tbody id="test-6">
115 | 					<tr><td>George Washington</td><td><time datetime="1789-04-30">April 30, 1789</time></td></tr>
116 | 				</tbody>
117 | 			</table>
118 | 			<script>
119 | 				test (6, function () {
120 | 					document.getElementById('test-6').appendChild(innerShiv("  <tr><td>John Adams<span /><script>alert('You shouldn\'t see this alert!');<\/script></td><td><time datetime=\"1797-03-04\">March 4, 1797</time></td></tr>  "));
121 | 				});
122 | 			</script>
123 | 		</section>
124 | 		
125 | 		<section class="test">
126 | 			<h2>Test 7: corrupt innerShiv outside DOM</h2>
127 | 			<p>This makes sure innerShiv can't be accidentally corrupted in fragment mode by unappended content.</p>
128 | 			
129 | 			<div id="test-7"></div>
130 | 			<script>
131 | 				test (7, function () {
132 | 					var s = document.createElement('div');
133 | 					innerShiv("<p class=\"error\">You should not see this text.</p>");
134 | 					s.appendChild(innerShiv("<section><p>This paragraph should have a green background.</p></section>"));
135 | 					document.getElementById('test-7').appendChild(s);
136 | 				});
137 | 			</script>
138 | 		</section>
139 | 	</article>
140 | </body>
141 | </html>


--------------------------------------------------------------------------------