最近碰到一个需求，大概意思就是提供一个脚本文件集成到用户的项目中。通过这个脚本文件去在客户的官网中加载我们的项目。ps：嫌啰嗦的直接跳过
因为在沟通中老是听他们说什么通过插件的方式加载项目，导致没沟通明白 我一度以为让我写个扩展程序。搞明白需求之后实现起来就很简单了。
首先需要写一个js脚本文件
window.onload = function(){ //这个不解释了吧 var htmls = document.createElement("test") //这个就是创建一个标签嘛 //给这个标签挂载属性 也就是样式，因为是需要客户引入的js文件 所以只能写成行内样式 htmls.setAttribute("style","background: red;width: 50px;height: 50px;position:fixed;right: 0;bottom: 0;") ////这只是个dome 这里设置简单标签内容 htmls.innerText = "chat" ////将创建好的标签 挂载到body上面 document.body.appendChild(htmls) ///这里再创建一个容器 因为引入的方式是通过iframe 跳到我们的项目 var boxx = document.createElement("test1") //同上上步 其实客户要求我们这样css样式都是可配的 我这个只是个dome boxx.setAttribute("style","width:800px;height:600px;position:fixed;right:50px;bottom:0;") document.body.appendChild(boxx)//挂载 //添加点击事件 htmls.addEventListener('click',function(){ var str = '<iframe frameborder="no" border="0" id="idIframe" name="idIframe" src="http://localhost:8081/#/" width="100%" height="100%"></iframe>' var text = document.createElement("text111") text.innerHTML = str //这里要注意哦 别用错了方法 // var sss = document.getElementsByClassName('test1')[0] boxx.appendChild(text) //将内容为iframe的节点挂载上去就欧克了 })}
因为script标签的特性，让客户在他们的官网直接引入就好了。无需下载
ps:引入的时候注意script标签的位置
