/js-injector

inject script and css file into page

Primary LanguageJavaScript

js-injector

Inject script and css file into page

Example:

index.html

<!doctype html>
<html>
<head>
	<script type='text/javascript' src='js/js-injector/injector.js'></script>
	<script type='text/javascript'>
		window.onload = function () {
			var a = document.getElementById('test');
			a.href = makeInject('TSCOPE', function(err,scope){
					console.log('inject!: ' + err);
					if(!err){
						scope.includeJS('/js/loader.js');
					};
				});
		};
	</script>
</head>
<body>
	<a href='#' id='test'>test</a>
</body>
</html>

loader.js

(function (window, scope) {
	console.log('Load loader.js');

	scope.includeJS('/js/foo.js', function(err, data) {
		console.log('foo include callback error: ' + err + '; data: ' + data);
	});
})(window, TSCOPE);

foo.js

(function (w, scope) {
	console.log('load foo.js');
	
	scope.includeCSS('/css/bar.css', function(err) {
		console.log('include bar.css');
	});
	
	scope.includeHTML(document.body, '/baz.html');
	
	scope.exports = 'some data';
})(window, TSCOPE);

bar.css

body {
	background: red;
}
  • Open index.html
  • Add test link to browser bookmarks
  • Go to another page(any) and click to bookmark
  • In the console should displayed something like this
  • inject!: null
  • Load loader.js
  • load foo.js
  • foo include callback error: null, data: some data
  • include bar.css (Only IE and Opera)

callback on html load not supported;