0

ユーザーエージェントがAndroid、iPhone、またはiPodのいずれであるかを検出し、そうである場合にのみjavascriptファイルをロードするjavascriptコードがあります。次のコードは完全に機能しますが、同じことを行う 2 つの「createscript」関数 (名前が異なる) が必要ないことを認識しているため、代わりにパラメーター/変数を使用しようとしています。考えられることはすべて試しましたが、うまくいきません。

   <script type="text/javascript">
    if(navigator.userAgent.match(/Android/i) ||
     navigator.userAgent.match(/webOS/i) ||
     navigator.userAgent.match(/iPhone/i) ||
     navigator.userAgent.match(/iPod/i)) {
        function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
                window.onload = func;
            } else {
             window.onload = function() {
                if (oldonload) {
                oldonload();
                }
                func();
                }
        }
        }


function createScript() 
{ 
var oNode=document.createElement("script"); 
document.getElementsByTagName("body")[0].appendChild(oNode);

oNode.setAttribute("id", "newScript", 0); 
oNode.setAttribute("type", "text/javascript", 0); 
oNode.setAttribute("src", "nav.js", 0); 
} 


function createScript_() 
{ 
var oNode=document.createElement("script"); 
document.getElementsByTagName("body")[0].appendChild(oNode);

oNode.setAttribute("id", "newScript", 0); 
oNode.setAttribute("type", "text/javascript", 0); 
oNode.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js", 0); 
}

addLoadEvent(createScript);
addLoadEvent(createScript_);
}
</script>

そして、これが私が試してきたパラメーターを含む新しいコードです（上記と同じで、createscript関数のパラメーターを設定しました）しかし、うまくいきません：

<script type="text/javascript">
if(navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
         window.onload = function() {
            if (oldonload) {
            oldonload();
            }
            func();
            }
    }
    }


function createScript(scriptname) 
{ 
var oNode=document.createElement("script"); 
document.getElementsByTagName("body")[0].appendChild(oNode);

oNode.setAttribute("id", "newScript", 0); 
oNode.setAttribute("type", "text/javascript", 0); 
oNode.setAttribute("src", + scriptname + , 0); 
} 

createscriptlibrary = createScript("https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js");
createmyscript = createScript("nav.js");

addLoadEvent(createscriptlibrary);
addLoadEvent(createmyscript);
}
</script>

それはおそらく小さなものですが、私には理解できません。ご協力いただきありがとうございます。

編集: @tj-crowder のおかげで、コードを次のように編集しました。これは完璧に機能します。

<script type="text/javascript">
if(navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {

    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
         window.onload = function() {
            if (oldonload) {
            oldonload();
            }
            func();
            }
    }
    }
function createscript(scriptName) {
    var oNode = document.createElement('script');
    oNode.src = scriptName;
    document.body.appendChild(oNode);
}

addLoadEvent(createscript.bind(undefined, "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"));
addLoadEvent(createscript.bind(undefined, "nav.js"));
}
</script>

@tj-crowder が、2 つの .js ファイルが正しい順序でロードされることに依存できないという事実について指摘したため、このコードにはまだいくつかの問題があるため、以下の回答で彼が提案したようにガードを試してみます。すべてのコメントをありがとう。

css ファイルでの質問の読み込みに対する新しい編集: ページの読み込み時に jquery lib と nav2.js ファイルを読み込む次のコードがあります。これは完璧に機能します。ブラウザが javascript をサポートしているときに、動的に css ファイルをロードするようにコードを取得しようとしていますが、機能していません。誰でも理由がわかりますか？cssファイルが読み込まれる前にページが表示されているためですか？ここに私のスクリプトコードがあります:

<script type="text/javascript">

function loadcssfile(filename){
  var fileref=document.createElement("link");
  fileref.href = filename;
  document.getElementsByTagName("head")[0].appendChild(fileref);
}
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
                window.onload = func;
        } else {
            window.onload = function() {
                    if (oldonload) {
                        oldonload();
                    }
                func();
                }
        }
    }

function createscript(scriptName) {
    var oNode = document.createElement('script');
    oNode.src = scriptName;
    document.body.appendChild(oNode);
}


addLoadEvent(createscript.bind(undefined, "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"));
addLoadEvent(createscript.bind(undefined, "nav2.js"));
loadcssfile("jqueryjava.css");

</script>
4

2 に答える 2

1

機能しない理由はcreateScript、関数を返さないことですが、期待しています。

最も簡単な方法は、これを行うことです：

addLoadEvent(function() { createscript("https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"); });
addLoadEvent(function() { createScript("nav.js"); });

ただし、によって作成された各タグに同じid値を与えていることに注意してください。これは有効ではありません。scriptcreateScript

ES5 対応の環境では を使用できますがFunction#bind、あなたの質問に関する何かから、ES5 対応の環境にいることに頼ることはできないことがわかります。しかし、完全を期すために：

addLoadEvent(createscript.bind(undefined, "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"));
addLoadEvent(createScript.bind(undefined, "nav.js"));

実際、いいえ、最も簡単な方法は、RequireJS など、このために設計されたいくつかのライブラリのいずれかを使用することです。:-)

サイドノート:createScript関数は著しく単純になる可能性があります(実際、質問で引用した関数には、+前の時点で構文エラーがありますscriptName):

function createScript(scriptName) {
    var oNode = document.createElement('script');
    oNode.src = scriptName;
    document.body.appendChild(oNode);
}

を設定する必要はありません。また、 for each スクリプトも渡さない限りtype、設定したくありません。とはどちらも反映されたプロパティであり、使用する必要はありません。ididsrctypesetAttribute

最後に、この方法でスクリプトをロードする場合、jQuery が既にロードされていることに依存するnav.js ことはできません。nav.js最初に jQuery スクリプト要素を作成している場合でも、jQuery より前に取得して評価 (実行) できます。動的に追加されたスクリプトは、必ずしも順番に評価されるとは限りません。nav.jsしたがって、コードには次のようなガードが必要です。

(function() {
    check();

    function check() {
        if (typeof jQuery === "undefined") {
            setTimeout(check, 50);
        }
        else {
            init();
        }
    }

    function init() {
    }
})();

これにより、jQuery がチェックされ、見つからない場合は 50 ミリ秒待機します (そして、それを永遠に続けると、マスター タイムアウトが必要になる場合があります)。

于 2013-09-12T13:01:56.427 に答える