Question

我们可以在html Dom Elements

中添加外部javascript文件或Css文件吗？

我创建了一个弹出窗口，想要添加几个js库

var alert_box=document.createElement('div');
alert_box.setAttribute('id', 'myhive');
var inline_css="box-sizing: content-box;font-family: Arimo, sans-serif;z-index: 214748364898;position: fixed;right:30px;top:30px;";
inline_css+="width:470px;height:100px;background:#333333;padding:7px 35px 0;box-shadow:#000 1px 1px 2px;margin: 0px;border:none;outline: none;";
alert_box.setAttribute('style', inline_css);
popup_text="Test popup for demo";
alert_box.innerHTML="<h3 style='font-size:15px !important;color:white;height:30px'>"+popup_text+"</h3><div class='button_walk'>"+
"<input type=text  id='input_txt' style='float:left;margin-left:0px;width:200px'>"+
"<input type=button name=txtbtn id=clbtn value=Save style='margin-left:30px'></div> ";

    document.body.appendChild(alert_box);

这是我的jsfiddle

Answer 1

请查看以下代码，

LoadScript = function (scriptUrl, callback) {
        var scriptElement = document.createElement('script');
        scriptElement.src = scriptUrl;
        var head = document.getElementsByTagName('head')[0], done = false;

        /* Attach handlers for all browsers */
        scriptElement.onload = scriptElement.onreadystatechange = function () {
            if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;
                callback();
                scriptElement.onload = scriptElement.onreadystatechange = null;
                head.removeChild(scriptElement);
            }
        };
        head.appendChild(scriptElement);
    };

以上代码会将脚本添加到您的html页面标题中。

Answer 2

您可以这样做：

<script type="application/javascript">
    function loadExternalJsFile(file) {

    var elm = document.createElement("script");

    elm.type = "application/javascript";

    elm.src = file;

    document.body.appendChild(elm);
}


</script>

<button onclick="loadExternalJsFile('somejsfile.js');">Load somejsfile.js</button>

在HTML DOM Elements下添加javascript文件或css文件

2 个答案: