pure/gist:252018

## gistfile1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>getTemplate</title>
	<script src="../libs/pure.js"></script>
	<script>
		$p.plugins.getTemplate = function(url, sel, cb){
			var ifr = document.createElement('IFRAME'),
				that = this;
			ifr.style.display = 'none';
			document.body.appendChild(ifr);
			ifr.src = url;
			ifr.onload = function(){
				var cw = ifr.contentWindow,
					// take the directive from a global variable directive in the tamplate page
					directive = cw.directive,
					// find the template by the selector sel
					t = that.find(cw.document.body, sel), nt, tt;

				if(t.length === 0){
					that.error('No template found for ' + sel + ' in ' + url);
				}
				// import the HTML
				if(typeof document.importNode !== 'undefined'){
					nt = document.importNode(t[0], true);
				}else{
					//IE
					d = document.createElement('div');
					d.innerHTML = t[0].outerHTML;
					nt = d.firstChild;
				}
				// callback when done passing the context to the current $p instance
				if(typeof cb === 'function'){
					cb.call(that, nt, directive);
				}
				//clean the dom
				document.body.removeChild(ifr);
				d = nt = ifr = null;
			};
		};
	</script>
</head>
<body>
	<div class="target"></div>
	<script>
		var data = {
			name:'beebole'
		};
		$p('div.target').getTemplate('template.html', 'div.template', function(template, directive){
			//compile the loaded template
			var tfn = $p(template).compile(directive);
			//render it 'this' is the current $p instance
			this.render(data, tfn);
		});
	</script>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

	<html>
	<head>
	<title>getTemplate</title>
	<script src="../libs/pure.js"></script>
	<script>
	$p.plugins.getTemplate = function(url, sel, cb){
	var ifr = document.createElement('IFRAME'),
	that = this;
	ifr.style.display = 'none';
	document.body.appendChild(ifr);
	ifr.src = url;
	ifr.onload = function(){
	var cw = ifr.contentWindow,
	// take the directive from a global variable directive in the tamplate page
	directive = cw.directive,
	// find the template by the selector sel
	t = that.find(cw.document.body, sel), nt, tt;

	if(t.length === 0){
	that.error('No template found for ' + sel + ' in ' + url);
	}
	// import the HTML
	if(typeof document.importNode !== 'undefined'){
	nt = document.importNode(t[0], true);
	}else{
	//IE
	d = document.createElement('div');
	d.innerHTML = t[0].outerHTML;
	nt = d.firstChild;
	}
	// callback when done passing the context to the current $p instance
	if(typeof cb === 'function'){
	cb.call(that, nt, directive);
	}
	//clean the dom
	document.body.removeChild(ifr);
	d = nt = ifr = null;
	};
	};
	</script>
	</head>
	<body>
	<div class="target"></div>
	<script>
	var data = {
	name:'beebole'
	};
	$p('div.target').getTemplate('template.html', 'div.template', function(template, directive){
	//compile the loaded template
	var tfn = $p(template).compile(directive);
	//render it 'this' is the current $p instance
	this.render(data, tfn);
	});
	</script>
	</body>
	</html>