webInject

Inject js and css into document, or preload images. and you can call it with chaining.

Usage

in ES5, you can ...

<script type="text/javascript" src="https://raw.githubusercontent.com/EvanLiu2968/web-inject/master/dist/webInject.min.js"></script>
<script>
  window.webInject
  .js('https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js', function(){
    alert('jQuery is injected!')
  })
  .css('https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css', function(){
    alert('Bootstrap is injected!')
  })
</script>

in ES6+, you can ...

# install it from npm
npm install web-inject --save

import webInject from 'web-inject'
// or
const webInject = require('web-inject')

Inject js or css tag

const webInject = require('web-inject')
webInject
  .js('https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js', function(){
    alert('jQuery is injected!')
  })
  .css('https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css', function(){
    alert('Bootstrap is injected!')
  })

Inject js or css into document

const webInject = require('web-inject')
const onComplete = function(){ alert('inject is completed!')}
webInject
  .js(
`
  [].forEach.call(document.querySelectorAll("*"), function(a) {
    a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16)
  });
`)
  .css(
`
  body{
    background: #20a0ff;
  }
`)

Inject js or css list

const webInject = require('web-inject')
webInject
  .js([
    'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js',
    'https://cdn.bootcss.com/lodash.js/4.17.5/lodash.min.js'
  ])
  .css([
    'https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css',
    'https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css'
  ])

Preload images

const webInject = require('web-inject')
webInject
.preload({
  image: [
    '/public/images/horse.png',
    '/public/images/eagle.png'
  ],
  js: [
    'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js',
    'https://cdn.bootcss.com/lodash.js/4.17.5/lodash.min.js'
  ],
  css: [
    'https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css',
    'https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css'
  ],
  urlFormat: function(url, type){
    if(type == 'image'){
      return 'https://www.evanliu2968.com.cn' + url
    } else {
      return url
    }
  },
  onComplete: function(){
    // a callback when all resourses are preloaded
  }
})

Create a new webInject

/*
 * the webInject is new instance by create
 * then, It's the same usage as above.
 */
const webInject = require('web-inject').create({
  urlFormat: function(url, type){
    if(type == 'css' && (! /^(http|\/)/.test(url))){
      // innerCSS opacity mixins for IE
      var t = url.match(/opacity:(\d?\.\d+);/);
      if (t != null) url = url.replace(t[0], "filter:alpha(opacity=" + parseFloat(t[1]) * 100 + ")")
      url = url + "\n"; // format perform view
    }
    if(type == 'image' && (! /^(http|\/\/)/.test(url))){
      // base url
      url = 'https://www.evanliu2968.com.cn' + url
    }
    return url
  },
  maxConnection: 4 // max Simultaneous Browser Connections at the same.
})

License

MIT