1、js实用方法记录-动态加载css/js
/**
* 动态加载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);
}
/**
* 动态加载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();
/**
* 动态加载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);
}
//方法测试: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;
}
/**
* 动态加载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);
}
//方法调用:dynamicLoadJs('http://www.yimo.link/static/js/main.min.js',function(){alert('加载成功')});
2、检测到是移动端还是pc端进入页面,加载不同样式表现
//第一种方式:
if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) {
if(window.location.href.indexOf("?mobile") < 0) {
try {
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
//window.location.href = "手机页面";
console.log('手机页面')
} else if(/iPad/i.test(navigator.userAgent)) {
//window.location.href = "平板页面";
console.log('平板页面')
} else {
//window.location.href = "其他移动端页面"
console.log('其他移动端页面')
}
} catch(e) {}
}
}else{
console.log('PC页面');
}
//第二种方式:
<script type="text/javascript">
// 判断是否为移动端运行环境
if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) {
if(window.location.href.indexOf("?mobile") < 0) {
try {
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
// 判断访问环境是 Android|webOS|iPhone|iPod|BlackBerry 则加载以下样式
setActiveStyleSheet("style_mobile_a.css");
} else if(/iPad/i.test(navigator.userAgent)) {
// 判断访问环境是 iPad 则加载以下样式
setActiveStyleSheet("style_mobile_iPad.css");
} else {
// 判断访问环境是 其他移动设备 则加载以下样式
setActiveStyleSheet("style_mobile_other.css");
}
} catch(e) {}
}
} else {
// 如果以上都不是,则加载以下样式
setActiveStyleSheet("style_mobile_no.css");
}
// 判断完毕后加载样式
function setActiveStyleSheet(filename) {
document.write("<link href=" + filename + " rel=stylesheet>");
}
</script>
//第三种方式:
window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" : "http://news.baidu.com/";
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
window.location.href = "https://www.baidu.com/";
} else {
window.location.href = "http://news.baidu.com/";
}