js实用方法记录-动态加载css/js

附送一个加载iframe,h5打开app代码

1. 动态加载js文件到head标签并执行回调

方法调用:dynamicLoadJs('http://www.yimo.link/static/js/main.min.js',function(){alert('加载成功')});

    /**
* 动态加载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

方法调用: dynamicLoadCss('http://www.yimo.link/static/css/style.css')

    /**
* 动态加载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. 动态加载脚本文件

参考:http://www.cnblogs.com/yuanke/p/5039699.html


/**
* 动态加载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标签并执行回调

方法调用:dynamicLoadIframe('http://www.yimo.link',function(){alert('加载成功')},'');

  /**
* 动态加载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})

js实用方法记录-js动态加载css、js脚本文件的更多相关文章

  1. 文字添加响应事件,js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  2. 动态加载css,js

    function dynamicLoadCss(url) { var head = document.getElementsByTagName('head')[0]; var link = docum ...

  3. 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

  4. jQuery中的ready方法及实现按需加载css,js

    模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...

  5. js实用方法记录-简单cookie操作

    js实用方法记录-简单cookie操作 设置cookie:setCookie(名称,值,保存时间,保存域); 获取cookie:setCookie(名称); 移除cookie:setCookie(名称 ...

  6. js实用方法记录-指不定哪天就会用到的js方法

    js实用方法记录-指不定哪天就会用到的js方法 常用或者不常用都有 判断是否在微信浏览器中 测试代码:isWeiXin()==false /** * 是否在微信中 */ function isWeix ...

  7. JavaScript动态加载CSS和JS文件

    var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argumen ...

  8. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  9. 动态加载CSS,JS文件

    var Head = document.getElementsByTagName('head')[0],style = document.createElement('style'); //文件全部加 ...

随机推荐

  1. 如何将多条update语句合并为一条

    需求: 如何将多条update语句合并为一条update语句:如,update table1 set col='2012' where id='2014001'      update table1  ...

  2. 浅谈C10K问题

    在大型的APP中进行高并发的访问,淘宝,支付宝,微信,QQ,等 C10K问题:高并发的进行访问 C10K问题的最大特点是:设计不够良好的程序,其性能和连接数及机器性能的关系往往 是非线性的.举个例子: ...

  3. 老李分享:android手机测试之适配(1)

    Android的屏幕适配一直以来都在折磨着我们这些开发者,本篇文章以Google的官方文档为基础,全面而深入的讲解了Android屏幕适配的原因.重要概念.解决方案及最佳实践,我相信如果你能认真的学习 ...

  4. input是否checked与使用jquery的attr或prop方法无关

    最近在项目中有这样一个需求,用户在下单时可以选择优惠券,也可取消选择,并且可以多次选择,取消. 这是一个典型的input标签checked功能,博主使用radio元素实现此需求,但是优惠券只能选中,不 ...

  5. [Python Web]部署完网站需要做的一些后续工作

    简述 今天上线了一个简单的 Page,没有什么功能就是一个展示页. 但是,我发现部署完,上线后,还要弄不少东西.下面就是我记录.整理的一些上线网站基本都会用到的网站和配置. 加入统计代码 这个是必做的 ...

  6. Android IPC机制全解析<一>

    概要 多进程概念及多进程常见注意事项 IPC基础:Android序列化和Binder 跨进程常见的几种通信方式:Bundle通过Intent传递数据,文件共享,ContentProvider,基于Bi ...

  7. 20170410 --- Linux备课资料 --- vim的使用

    首先我们要了解一下什么是vim? -----> vim是从vi发展出来的一个文本编辑器. 那问题又来了,什么是vi呢? ------> vi 是Unix like (可以理解为linux) ...

  8. meta 整理

    < meta > 元素 概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 we ...

  9. golang环境

    Golang是谷歌开发的一款开源性语言,暂时比较方便的IDE有Inteillj Idea.LiteIDE.Eclipse(Golipse)等,使用起来比较方便的IDE:LiteIDE和Inteillj ...

  10. STM32学习笔记(五)——通用定时器计数延时

    STM32定时器概述 STM32F40x系列总共最多有14个定时器,定时器分为三类:基本定时器.通用定时器和高级定时器.它们的都是通过计数来达到定时的目的,和51的定时器差不多,基本原理都是一样的,就 ...