Fork me on GitHub

通过js动态插入js和css代码

最近遇到一个需求,不同的客户需要不同的定制登录页,但是又在同一个域名下。王二想了想,这或许可以通过js动态插入js和css代码来实现

大致思路是这样:

1、在登录页地址栏传一个参数,例如oid(不同客户的oid)不同;

2、js获取这个参数,然后再请求后台接口获得动态的js和css地址;

3、然后再加载相应的地址,加载方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//url是要加载的js地址,fn是加载完成后的回调函数
function insertScript (url,fn) {
var heads = document.getElementsByTagName("head"),
script = document.createElement('script');
script.setAttribute("type", "text/javascript");
script.setAttribute('src', url);
script.onload = script.onreadystatechange = function () {
fn && fn();
}
if(heads.length){
heads[0].appendChild(script);
}else{
document.documentElement.appendChild(script);
}
}
//url是要加载的css地址,fn是加载完成后的回调函数
function insertCss (url,fn) {
var heads = document.getElementsByTagName("head"),
link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", url);
link.onload = link.onreadystatechange = function () {
fn && fn();
}
if(heads.length){
heads[0].appendChild(link);
}else{
document.documentElement.appendChild(link);
}
}

4、注意到js和css加载完成后页面会重绘,这时候页面会一闪一下,很不美观。于是我们可以暂时先将页面隐藏起来,然后在加载完成后回调里再将页面显示出来,这样来看是比较好的解决方案。

-------------本文结束感谢您的阅读-------------