layui外部引入,从文件外部引入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 = ''

body.appendChild(box)

｝

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