0

我有一些 javascript 代码可以检测用户代理是 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>
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每个script标签赋予相同的值createScript，这是无效的。

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

不需要 set ，除非您还为每个脚本传递了一个，否则您type不想设置。两者和都是反射属性，无需在它们上使用。ididsrctypesetAttribute

最后附注：如果以这种方式加载脚本，nav.js 则不能依赖已经加载的 jQuery。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 回答
0

在我上面的最新编辑中，我想知道如何动态添加 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>
于 2013-09-27T17:45:29.717 回答