将参数传递给javascript中的函数，但函数不起作用

Question

我有一些javascript代码，可以检测useragent是android，iphone还是ipod，然后仅在这种情况下才加载我的javascript文件。 以下代码可以正常工作，但是我知道我不需要两个具有相同功能的“ 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指出此代码仍然存在一些问题，因为我不能依靠我的两个.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>

Answer 1

无效的原因是createScript不会返回函数，但是您希望它返回。

最简单的方法就是这样做：

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

但是请注意，您要为由createScript创建的每个script标签赋予相同的id值，这是无效的。

在启用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);
}

无需设置type ，除非您还为每个脚本都传递了一个id ，否则您不需要设置id 。 而且src和type都是反映的属性，无需在其上使用setAttribute 。

---

最后一点说明：如果您以这种方式加载脚本，则nav.js 不能依赖已加载的jQuery。 即使您首先创建jQuery脚本元素，也可以在jQuery之前检索和评估nav.js （运行）。 动态添加的脚本不必按顺序进行评估。 因此，您需要保护nav.js代码，例如：

(function() {
    check();

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

    function init() {
    }
})();

这将检查jQuery，并在找不到后等待50毫秒（并一直执行下去，您可能需要主超时）。

Answer 2

在上面的最新编辑中，我想知道如何动态添加css文件。 我改用了以下代码，现在可以正常工作了。 谢谢

<script type="text/javascript">
var headID = document.getElementsByTagName("head")[0];         
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'jqueryjava.css';
headID.appendChild(cssNode);
</script>