js常用函数记录
程序员文章站
2022-05-03 23:00:38
1、js实用方法记录-动态加载css/js
/**
* 动态加载css
* @param {string} url 样式地址
*/...
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,可参考https://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('https://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") "); } </script> //第三种方式: window.location.href = /android|webos|iphone|ipod|blackberry/i.test(navigator.useragent) "https://www.baidu.com/" : "https://news.baidu.com/"; if(/android|webos|iphone|ipod|blackberry/i.test(navigator.useragent)) { window.location.href = "https://www.baidu.com/"; } else { window.location.href = "https://news.baidu.com/"; }