17

div特定のものが読み込まれたときに、サイトにスクリプトとスタイルを追加したいと考えています。まず、スクリプトまたはスタイルシートへのパスを定義してから、要素を作成します。以下、要素を HTML の head タグに追加します。

しかし、もう一度追加する前に、スクリプトまたはスタイルシートが既に追加されているかどうかを確認する方法が必要です。既存のスクリプトやスタイルシートを追加するのはばかげています。

Q: JavaScript を使用して head タグにスクリプトが既に存在するかどうかを確認し、存在しない場合は要素を追加するにはどうすればよいですか?

編集

@KernelPanik からの回答に基づいて関数を作成しました。まだ機能していませんが、機能することを願っています。関数は現在問題になっています:私のスクリプト追加関数は動作しません

4

7 に答える 7

7 
var lib = '/public/js/lib.js';

if (!isLoadedScript(lib)) {
  loadScript(lib);
}

// Detect if library loaded
function isLoadedScript(lib) {
  return document.querySelectorAll('[src="' + lib + '"]').length > 0
}

// Load library
function loadScript(lib) {
  var script = document.createElement('script');
  script.setAttribute('src', lib);
  document.getElementsByTagName('head')[0].appendChild(script);
  return script;
}
于 2016-01-12T08:53:00.277 に答える
4

DOM を使用して、ドキュメント内のgetElementsByTagName("script") すべての<script>タグを取得できます。次にsrc、head セクションに追加したスクリプトの URL について、返された各スクリプト タグの URL を確認できます。同様に、「スクリプト」の検索を「スタイル」に置き換えることで、スタイル シートについても同様のことができます。

たとえば、<head>セクションに追加されたスクリプトの URL がheader_url.html

var x = document.getElementsByTagName("script");
var header_already_added = false;

for (var i=0; i< x.length; i++){
    if (x[i].src == "header_url.html"){
        // ... do not add header again
        header_already_added = true;
    }
}

if (header_already_added == false){
    // add header if not already added
}

同様に、<head>セクションに追加されたスタイルの URL がheader_style.css

var x = document.getElementsByTagName("style");
var header_already_added = false;

for (var i=0; i< x.length; i++){
    if (x[i].src == "header_style.css"){
        // ... do not add header again
        header_already_added = true;
    }
}

if (header_already_added == false){
    // add header if not already added
}

同様の質問もここで尋ねられました: Javascriptスクリプトがページに存在するかどうかを確認してください

于 2013-04-13T12:32:17.003 に答える
2

ジャック・リーのソリューションを使用しました。実装は簡単で、ほぼすべてのタイプ ファイルですばやく汎用性がありました。そうしないと...

var lib_jq = '//pathtofile/jquery.js';
var lib_bs = '//pathtofile/bootstrap.min.3.5.js';
var lib_cs = '//pathtofile.css';

 ///checks files with the SRC attribute
function isLoadedScript(lib) {
    return document.querySelectorAll('[src="' + lib + '"]').length > 0
}
///checks files with the HREF attribute
function isLoadedCss(lib) {
    return document.querySelectorAll('[href="' + lib + '"]').length > 0
}
///loads the script.js files
function loadScript(link) {
   document.write('<scr' + 'ipt type="text/javascript" src="'+link+'"></scr' + 'ipt>');
}

///loads the style.css files
function loadCss(link) {
   document.write('<link rel="stylesheet" href="'+link+'">');
}

 /// run funtion; if no file is listed, then it runs the function to grab the URL listed. ///Run a seperate one for each file you wish to check. 
if (!isLoadedScript(lib_jq)) { loadScript(lib_jq); }
if (!isLoadedScript(lib_bs)) { loadScript(lib_bs); }
if (!isLoadedCss(lib_cs))    { loadCss(lib_cs);    }

I know there is always a "better" and more "elegant" solution, but for us beginiers, we got to get it working before we can start to understand it...
于 2016-05-14T05:07:51.150 に答える
-3

そのjsスクリプトファイルから関数、オブジェクト、変数を呼び出してみてください。見つかった場合は存在し、そうでない場合はそのjsスクリプトファイルを挿入する必要があります。

于 2014-07-31T14:07:44.830 に答える