欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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/";
}