js实用方法记录-动态加载css/js
1. 动态加载js文件到head标签并执行回调
/**
* 动态加载JS
* @param {string} url 脚本地址
* @param {function} callback 回调函数
*/
function dynamicLoadJs(url, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
if(typeof(callback)=='function'){
script.onload = script.onreadystatechange = function () {
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete"){
callback();
script.onload = script.onreadystatechange = null;
}
};
}
head.appendChild(script);
}
2. 动态加载css文件到head
/**
* 动态加载CSS
* @param {string} url 样式地址
*/
function dynamicLoadCss(url) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type='text/css';
link.rel = 'stylesheet';
link.href = url;
head.appendChild(link);
}
3. 动态加载脚本文件
/**
* 动态加载css脚本
* @param {string} cssText css样式
*/
function loadStyleString(cssText) {
var style = document.createElement("style");
style.type = "text/css";
try{
// firefox、safari、chrome和Opera
style.appendChild(document.createTextNode(cssText));
}catch(ex) {
// IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性
style.styleSheet.cssText = cssText;
}
document.getElementsByTagName("head")[0].appendChild(style);
}
// 测试
var css = "body{color:blue;}";
loadStyleString(css);
/**
* 动态加载js脚本
* @param {string} code js脚本
*/
function loadScriptString(code) {
var script = document.createElement("script");
script.type = "text/javascript";
try{
// firefox、safari、chrome和Opera
script.appendChild(document.createTextNode(code));
}catch(ex) {
// IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。
script.text = code;
}
document.getElementsByTagName("head")[0].appendChild(script);
}
// 测试
var text = "function test(){alert('test');}";
loadScriptString(text);
test();
4. 动态加载iframe到body标签并执行回调
/**
* 动态加载Iframe
* @param {string} url 脚本地址
* @param {function} callback 回调函数
* @param {string} style 加载样式
*/
function dynamicLoadIframe(url,callback,style) {
var body = document.getElementsByTagName('body')[0];
var iframe = document.createElement('iframe');
iframe.src = url;
iframe.style=style||'display:none;width:0px;height:0px;';
if(typeof(callback)=='function'){
iframe.onload = iframe.onreadystatechange = function () {
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
callback();
iframe.onload = iframe.onreadystatechange = null;
}
};
}
body.appendChild(iframe);
}
5. M站中下载/打开app
方法测试：openApp('ios页面','**.apk','metools://home');
function openApp(iosDownUrl,andDownUrl,appUrl) {
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {//ios跳转到store
window.location.href = iosDownUrl;
return;
}
if(ua.indexOf("micromessenger") > -1){//微信中不能打开其他app
window.location.href = andDownUrl;
return;
}
if (/android/.test(ua)) {//安卓手机尝试调用app
if(!appUrl){
console.log('未指定需要打开的App,可参考http://www.oschina.net/code/snippet_256033_35330/');
return;
}
var su = appUrl;//"metools://index";//自定义协议
var n = setTimeout(function () {
window.location.href = andDownUrl
}, 500);
var r = document.createElement("iframe");
r.src = su;
r.onload = function () {
console.log('iframe load')
clearTimeout(n);
r.parentNode.removeChild(r);
window.location.href = su;
};
r.setAttribute("style", "display:none;");
document.body.appendChild(r);
return;
}
window.location.href = andDownUrl;
}
query参数转换
参考：https://github.com/nicejade/awesome-vue-cli3-example/blob/master/src/helper/utils.js#L36
query参数转对象
export function query(search) {
let str = search || window.location.search
let objURL = {}
str.replace(new RegExp('([^?=&]+)(=([^&]*))?', 'g'), ($0, $1, $2, $3) => {
objURL[$1] = $3
})
return objURL
}
使用：query('?v=1')
对象转query参数
function queryString(url, query) {
let str = []
for (let key in query) {
str.push(key + '=' + query[key])
}
let paramStr = str.join('&')
return paramStr ? `${url}?${paramStr}` : url
}
使用： queryString('http://192.168.1.32:3638/checkout',{abc:123})