項目需求
需求是完成一個插入頁面webim插件，希望只在頁面中引用一條webim.js散劫，即可以將整個webim插入頁面肃续，那么我們就需要在引入的這一條webim.js文件內(nèi)執(zhí)行一些方法商叹，來講我們整個插件都引入進來
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觸發(fā)的事件，我們直接找到頁面的head部分窟却，然后創(chuàng)建一個script標簽,之后為該標簽附上type昼丑、src等屬性，之后將其append到頁面的head部分夸赫。
使用script.onload方法菩帝，使得在layui,js加載完成時，立刻執(zhí)行需要的方法茬腿，這樣即可完成從外部引入js/css呼奢。
甚至你還可以直接在引用js的頁面里直接創(chuàng)建一個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)
｝
比如這樣，創(chuàng)建一個div切平，創(chuàng)建一個樣式握础，同樣的插入頁面的head,在div上添加屬性，然后在其中插入iframe悴品，最后將其插入頁面的body
