从文件外部引入js/css

项目需求

需求是完成一个插入页面webim插件，希望只在页面中引用一条webim.js，即可以将整个webim插入页面，那么我们就需要在引入的这一条webim.js文件内执行一些方法，来讲我们整个插件都引入进来

window.onload = function () {
  let body = document.body
  let box = document.createElement('div')
  let head = document.getElementsByTagName('head')[0];
  /*引入layui.js*/
  let script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = './layui/layui.js';
  head.appendChild(script);
  script.onload = function(){
    layui.use('layer', function(){
      window.layer = layui.layer;
    }); 
  }
}

这是通过webim.js引入layui的方法，通过window.onload触发的事件，我们直接找到页面的head部分，然后创建一个script标签,之后为该标签附上type、src等属性，之后将其append到页面的head部分。
使用script.onload方法，使得在layui,js加载完成时，立刻执行需要的方法，这样即可完成从外部引入js/css。

甚至你还可以直接在引用js的页面里直接创建一个div来展示你需要放进去的元素

window.onload = function () {
  let body = document.body
  let box = document.createElement('div')
  let head = document.getElementsByTagName('head')[0];
  /*引入layui.js*/
  let style = document.createElement('style')
  style.innerHTML = `
    .zhu_some_class{
      position: fixed;
      bottom: 0;
      right: 0;
      width: 120px;
      height: 50px;
      border: 1px solid #D9D9D9;
      border-color: rgba(0,0,0,.05);
      background-repeat: no-repeat;
      background-color: #F6F6F6;
      color: #333;
      transition:0.15s all;
      display:flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      cursor:pointer
    }
  `
  document.head.appendChild(style)
  box.classList.add('zhu_some_class')
  box.innerHTML = '<iframe style="width: 100%;height: 100%;overflow: hidden;border:none;" src="./base.html"></iframe>'
  body.appendChild(box)
｝

比如这样，创建一个div，创建一个样式，同样的插入页面的head,在div上添加属性，然后在其中插入iframe，最后将其插入页面的body