動態加載js

CNZPH 發布于2019-08-20 10:37 / 2345人閱讀

摘要：在前端開發中，經常需要用從后臺獲取動態數據，因此不能寫死，而要動態加載。問題描述實習期間在做一個需求的過程中碰到需要從后臺動態加入的問題。因此不能采取上述方法來動態加載。

在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動態加載數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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