动态加载js

CNZPH 发布于2019-08-20 10:37 / 2211人阅读

摘要：在前端开发中，经常需要用从后台获取动态数据，因此不能写死，而要动态加载。问题描述实习期间在做一个需求的过程中碰到需要从后台动态加入的问题。因此不能采取上述方法来动态加载。

在Web前端开发中，经常需要用ajax从后台获取动态数据，因此不能写死，而要动态加载js。
问题描述：实习期间在做一个需求的过程中碰到需要从后台动态加入js的问题。

首先，我给出的解决方案是：

其中向url_demo发送http请求，返回一个json串，其中包括我们想要的url，这里的url是一段js，获取url后赋值给内部嵌入了一段脚本之后，就不能修改其属性值了。因此不能采取上述方法来动态加载js。
解决方案可修改为：

也就是多带带拎一个，里面不加任何js代码，然后用另外的编写js脚本前一个的src属性进行修改，达到页面动态加入js的要求。
后来导师说上面的做法有点low，而且“极具创造力”（不过发现了一个问题然后解决了，还是不错滴），就要我去找loadjs的常规方法，这里借用一下玉伯seajs里的loadJs方法，学习一下大神的写法：

function loadJs(url , callback){
    var node = document.createElement("script");
    node[window.addEventListener ? "onload":"onreadystatechange"] = function(){
        if(window.addEventListener || /loaded|complete/i.test(node.readyState)){
            callback();
            node.onreadystatechange = null;
        }                                                                             
    }
    node.onerror = function(){};
    node.src = url;
    var head = document.getElementsByTagName("head")[0];
    head.insertBefore(node,head.firstChild); 　
}

用法如下：

$(function(){
        $.ajax({
            type: "GET",
            data: {captchaType:1},
            url: "demo_url",
            dataType: "jsonp",
            jsonp: "callback"
        }).done(function(json){
            if (json.code == 0) {
                //参数url和回调函数
                loadJs(json.url, fCb);
            }
        });
        function fCb(){
            //回调函数，第一次需要用到上述url对应js脚本的函数
            init("container1", "point");
        }
})

好啦，还是看的、学的太少了，以后要多看大牛的写法，只有看得多了，才能不会一头钻进死胡同里。

私有云 GPU服务器动态加载js js 动态加载视频 js 动态加载数据 js动态加载数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80237.html

js实用方法记录-js动态加载css、js脚本文件

摘要：测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用：dynamicLoadJs(http://www.yimo.link/static/...

shusen 2019-08-23 13:10 评论0 收藏0
js实用方法记录-js动态加载css、js脚本文件

摘要：测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用：dynamicLoadJs(http://www.yimo.link/static/...

Dogee 2019-08-02 11:59 评论0 收藏0
js实用方法记录-js动态加载css、js脚本文件

摘要：测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用：dynamicLoadJs(http://www.yimo.link/static/...

sanyang 2019-08-29 17:14 评论0 收藏0
原生JS动态加载JS、CSS文件及代码脚本

摘要：属性共中状态初始状态加载中加载完成已加载并可与用户交互，但还需要加载图片等其他资源全部资源加载完成文档加载顺序解析结构加载外部脚本和样式表文件解析并执行脚本树构建完成加载外部资源文件图片等页面加载完成动态加载公共方法动态加载外部文件，并执行 DOM readyState属性共5中状态 uninitialized：初始状态 loading：document加载中 loaded: ...

you_De 2019-08-22 18:50 评论0 收藏0
原生JS动态加载JS、CSS文件及代码脚本

摘要：属性共中状态初始状态加载中加载完成已加载并可与用户交互，但还需要加载图片等其他资源全部资源加载完成文档加载顺序解析结构加载外部脚本和样式表文件解析并执行脚本树构建完成加载外部资源文件图片等页面加载完成动态加载公共方法动态加载外部文件，并执行 DOM readyState属性共5中状态 uninitialized：初始状态 loading：document加载中 loaded: ...

yagami 2019-08-30 15:54 评论0 收藏0