"type"或 "rel"的 Javascript onload 回调，脚本或链接标记上的 'text/plain'

Question

为什么不为 script type="text/plain"触发 onload？下面的 loadPlain 不会触发回调，但 loadScript 会。

我原以为这会起作用……难道不应该吗？

    loadPlain("http://localhost/ajax/libs/jquery/1.10.2/jquery.min.js", function(element) {
            alert(1);
            alert(element.innerHTML);
    }, undefined, {})

    function loadPlain(path, callback, errorCallback, options) {
            var element = document.createElement('script');
            element.setAttribute("type", 'text/plain');
            element.setAttribute("src", path);

            return loadBase(element, callback, errorCallback, options);
    }

    function loadScript(path, callback, errorCallback, options) {
            var element = document.createElement('script');
            element.setAttribute("type", 'text/javascript');
            element.setAttribute("src", path);

            return loadBase(element, callback, errorCallback, options);
    }


    function loadBase(element, callback, errorCallback, options) {
            element.loaded = false;

            if (element.readyState){  // IE
                    element.onreadystatechange = function(){
                            if (element.readyState == "loaded" || element.readyState == "complete"){
                                    element.onreadystatechange = null;

                                    loadBaseOnload(element, callback);
                            }
                    };
            } else {                 // Others
                    element.onload = function() {
                            loadBaseOnload(element, callback);
                    };
            }

            element.onerror = function() {
                    errorCallback && errorCallback(element);
            };

            (options.elementAppendTo || document.head || loadBase.head || (loadBase.head = document.getElementsByTagName('head')[0]) || document.body).appendChild(element);

            return element;
    }

    function loadBaseOnload(element, callback) {
            if (element.loaded != true) {
                    element.loaded = true;
                    if ( callback ) callback(element);
            }
    }

请注意，我知道 XMLHttpRequest，但这不是问题:)

Answer 1

WHATWG(与 W3C 一起指定浏览器行为的组织)有一个 list of known script MIME types以及一些不得被视为脚本语言的列入黑名单的 MIME 类型:

The following lists the MIME type strings that user agents must recognize, and the languages to which they refer:

• "application/ecmascript"
• "application/javascript"
• "application/x-ecmascript"
• ...

The following MIME types (with or without parameters) must not be interpreted as scripting languages:

• "text/plain"
• "text/xml"
• "application/octet-stream"
• "application/xml"

Note: These types are explicitly listed here because they are poorly-defined types that are nonetheless likely to be used as formats for data blocks, and it would be problematic if they were suddenly to be interpreted as script by a user agent.

这里 WHATWG 规范称为“数据 block ”的是包含在 <script> 中的非脚本标签:

In this example, two script elements are used. One embeds an external script, and the other includes some data.

<script src="game-engine.js"></script>
<script type="text/x-game-map">`
........U.........e
o............A....e
.....A.....AAA....e
.A..AAA...AAAAA...e
</script>

指定 load 的 WHATWG 规范组件<script> 的事件标记明确声明它们为 <script> 引用的脚本 触发标签，而不是非脚本数据 block 。 <script>元素是一个数据 block ，如果它的 type不被识别为对应于浏览器支持的脚本语言的 MIME 类型。这意味着像 text/plain 这样的黑名单类型永远不会被识别为脚本，而在必须支持或不得支持列表中键入值，例如 application/dart (针对 Google 的 Dart 语言)可能受某些浏览器支持。

此外，包括一个非脚本 type在src旁边不符合规范。数据 block 只有在指定内联时才合法:

When used to include data blocks (as opposed to scripts), the data must be embedded inline, the format of the data must be given using the type attribute, the src attribute must not be specified, and the contents of the script element must conform to the requirements defined for the format used.