如何使用Javascript将<script>附加到Head或Body?</script>

时间:2014-10-21 03:05:05

标签: javascript html

我遇到了JavaScript问题。

我在google上搜索了如何使用javascript追加,我找到了一个例子。我想手动将script标签附加到头部或身体上,但示例只是附加在头部。

我编辑了这个示例,以便脚本标记可以附加在头部或正文中,但代码不起作用。

任何人都可以帮我解决问题吗?请告诉我关于jsfiddle的演示:D

谢谢:)

这是我的剧本:

//JS
//Defined with  loadjscssfile("yourcssurl.js", "js", "head"); or addCss("yourcssurl.js", "js", "body");
//CSS
//Defined with  loadjscssfile("yourcssurl.css", "css", "head"); or addCss("yourcssurl.css", "css", "body");
function loadjscssfile(filename, filetype, pos) {
    if (filetype == "js") { //if filename is a external JavaScript file
        var fileref = document.createElement('script')
        fileref.setAttribute("type", "text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype == "css") { //if filename is an external CSS file
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }

    if (typeof fileref == filetype) {
        document.getElementsByTagName(pos)[0].appendChild(fileref)
    }

    else if (typeof fileref != "undefined") {
        document.getElementsByTagName("head")[0].appendChild(fileref)
    }
}

loadjscssfile("myscript.js", "js", "body") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js", "body") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css", "body") ////dynamically load and add this .css file

在编辑之前,这是原始脚本:Dynamically loading an external JavaScript or CSS file

抱歉我的英文不好:)

2 个答案:

答案 0 :(得分:4)

您可以从谷歌学习动态添加脚本

(function () {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
})();

我不确定你在一天结束时想要达到的目标,但要好好看一下脚本,它是异步的。所以你不必担心资源加载的顺序。

在某些用例中,您可能需要控制脚本加载的顺序,您可以考虑使用RequireJSModernizr

答案 1 :(得分:1)

你非常接近,但是你不需要你添加的额外if条件,这应该足够了:

function loadjscssfile(filename, filetype, pos) {
    var fileref;

    if (filetype === "js") { //if filename is a external JavaScript file
        fileref = document.createElement("script");
        fileref.setAttribute("type", "text/javascript");
        fileref.setAttribute("src", filename);
    }
    else if (filetype === "css") { //if filename is an external CSS file
        fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    }

    if (fileref) {
        document.getElementsByTagName(pos)[0].appendChild(fileref);
    }
}

试一试。