最近また振り返って高程を見て、DOMの章を見て、その中でjsとcssを動的にロードするのは日常の開発の中で使用する頻度が高くて、ここでまとめて、みんなが参考にして私と自分で調べるのに便利です.

一、動的ロードjs

動的にjavascriptをロードするには、オリジナルの方法がいくつかあります.以下、具体的に羅列しますが、オリジナルの方法は互換性がなく、役割ドメインに影響を与える場合もあります.jQueryのgetscriptを使用することをお勧めします.

方法1

function loadScript(url) {

        let script = document.createElement('script');

        script.type = 'text/javascript';
        script.src = url;
        document.body.appendChild(script);
}

loadScript('https://cdn.bootcss.com/jquery/3.2.1/jquery.js');

まずscriptラベルを作成し、type、src属性値を設定し、最後にbodyに挿入することを考えます.この方法はIE初期のブラウザには適用されません.IE初期のブラウザはscriptラベルのtext属性を使用してjsコードを指定する必要があるため、その方法には互換性の問題があり、推奨されません.

方法2

function loadScriptCode (code) {

            let script = document.createElement('script');

            script.type = 'text/javascript';

            try {
                script.appendChild(document.createTextNode(code));
            } catch (ex) {
                        // IE          script   text     js  
                script.text = code;
            }

            document.body.appendChild(script);
}

let demo = 'function demo() {alert('test');}';
loadScriptCode(text);
demo();

一見、try,catchを用いて各ブラウザに互換性のある処理を行っているが、try,catchは役割ドメインを破壊するため、推奨されていない.

方法3

$.getscript("https://cdn.bootcss.com/jquery/3.2.1/jquery.js");

jQueryのgetscriptメソッドを使用する、getScript()メソッドは、HTTP GETリクエストによりJavaScriptファイルの読み込みと実行の推奨を行い、もちろん$を使用することも可能である.ajax()の方法は,あまり述べない.

方法四

requireとimport方式を使いますが、まだあまり使われていないので、理解としていいです.

二、動的ロードcss

方法1

function loadStyle(url) {

            let link = document.createElement('link');
            link.type = 'text/css';
            link.rel = 'stylesheet';
            link.href = url;
            document.getElementsByTagName('head')[0].appendChild(link);
}
loadStyle('https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css');

実際には、音声ダイナミックロードcssとロードjsは似ています.思想はすべて要素を作成し、その要素に属性と属性値を追加し、ページに挿入することです.ただし、ダイナミックロードcssの特別な点は、bodyラベルではなくheadラベルに挿入することです.

方法2

fucntion loadStyle(cssText) {

            let style = document.createElement('style');

            style.type = 'text/css';

            try {
                style.appendChild(document.createElement('cssText'));
            } catch (ex) {
                //   IE      ，    style   stylesheet   cssText  
                style.stylesheet.cssText = cssText
            }
}

cssスタイルの導入方式には外部導入,ページ内埋め込み,行内様式があることしか知られていないが,方法はlinkタグを用いた外部導入の方式を述べると,方法2ページ内埋め込みのstyle方式を紹介し,MVCモデルを提唱する人は,言うまでもなく,この方法を提唱しない.

方法3

$('').attr({

            rel: 'stylesheet',
            type: 'text/css',
            href: 'https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css'

}).appendTo('head');

ここを見て!ここを見て!またjQueryに来て、比較的に推薦する方式、jQueryの方法のチェーン式の方法の1つで解決して、とてもさわやかで木があります.

方法四

requireとimport方式を使って、あまり使わないので、理解してください.
ここで終わります.よくあるjsとcssを動的にロードする方法を覚えていますか.