Question

我正在尝试加载两个功能上延迟的脚本，因为它们的type属性是非标准的，即text/javascript/defer。这样做会导致解析器忽略它们，所以我想用JavaScript重新加载它们。

我的HTML如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>No Title</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script type="text/javascript/defer" src="assets/js/test3.js"></script>
<script type="text/javascript/defer" src="assets/js/test4.js"></script>

<script type="text/javascript" src="assets/js/jquery.js"></script>
<script>

    $(document).ready(function(){

        var defer_js_collection_obj = $("[type='text/javascript/defer']"),
            el_head_rq_obj = $('head'),
            el_head_obj = el_head_rq_obj[0]
        ;

        if(defer_js_collection_obj.length > 0)
        {
            //Reload JavaScript
            defer_js_collection_obj.each(function() {

                var file_src_outer_html_str = this.outerHTML;
                var file_src_res_arr = file_src_outer_html_str.match("src *\= *[\"\']{1}(.*?)[\"\']{1}");
                var file_src_str = file_src_res_arr[1];

                var fileref = document.createElement('script');
                fileref.setAttribute("type", "text/javascript");
                fileref.setAttribute("src", file_src_str);
                document.getElementsByTagName("head")[0].appendChild(fileref);
            });

            //Unload JavaScript with defer tag
            for(var j = defer_js_collection_obj.length-1; j >= 0; j--)
            {
                defer_js_collection_obj[j].parentNode.removeChild(defer_js_collection_obj[j]);
            }
        }

    });

</script>
</head>
<body>
   <div>Load Deferred JavaScript</div>
</body>
</html>

jquery.js是版本1.11.2。 test3.js和test4.js引用了我要加载的javascript文件，它们分别包含console.log('test3.js is loaded');和console.log('test4.js is loaded');。

我遇到的问题是，除了Firefox之外，这个脚本几乎可以在其他任何地方使用。我使用的是Firefox 46.0.1的Mac OS X 10.10.5，加载脚本时没有看到console.log消息。

我该如何解决这个问题？

Answer 1

尝试在正文的末尾添加脚本，所以请执行以下操作：

document.getElementsByTagName("body")[0].appendChild(fileref);

Answer 2

这可能是一个哑剧类型的问题。你碰巧看到控制台中的任何消息都说“格式不正确”吗？在任何情况下，这似乎对我有用，我同意你的代码在我第一次尝试时在FF中不起作用。

    $(document).ready(function(){
        console.log("main");

        var $body = $($("body")[0]);
        var $scripts = $("[type='text/javascript/defer']");

        $scripts.each(function(){
            var scriptTag = document.createElement("script");
            scriptTag.setAttribute("type", "text/javascript");
            scriptTag.setAttribute("src", $(this).attr("src"));
            $body.append(scriptTag);
        });
    });

Firefox不执行动态加载的JavaScript文件

2 个答案: