Home > js-injector

js-injector

Js-injector is a project mainly written in JavaScript, it's free.

inject script and css file into page

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;

Previous：wycatsnumber

Next：samplec