元素.innerHTML赋值有回调函数吗？

Question

使用Head.js时，设置脚本元素的.src属性，会调用回调方法来确认脚本是否已准备好。

然而，我想通过将文本分配给.innerHTML来加载脚本。但是当我更新/编辑代码以使用此属性时，同样的回调没有触发。

/*addScriptText1
** modified from head.js
**
**
*/
function addScriptText1(file_name, callback, key) {
    var element = document.createElement('script');
    element.async = true;
    element.innerHTML = localStorage[file_name];
    element.onreadystatechange = element.onload = function () {
        $A.log('callback for element called');
        if ((!element.readyState || /loaded|complete/.test(element.readyState))) {
            localStorage[key + '_loaded'] = true;
            callback();
        }
    };
    document.head.appendChild(element);
}

- user1637281

Answer 1

当内联脚本被插入到DOM中时，脚本会立即执行。这一切都是同步发生的，因此您不需要回调函数。

async 在这里没有任何作用，因为您没有进行网络请求。同样，readyState也没有用，因为您是通过编程方式创建它的，所以脚本将立即加载。

- loganfsmyth

---

@pure_code 这确实需要时间，但在此期间JS被阻塞，因此它是同步的。 - loganfsmyth

@pure_code 你能详细说明一下为什么你希望/期望这个是异步的吗？ - loganfsmyth

是的，它是单线程的，所以最好让它异步化可以允许脚本解析与应用逻辑并行运行，但归根结底，解析并不是占用大部分时间的事情。 - loganfsmyth

从技术上讲，工作线程可以并行解释独立于DOM的脚本。 - user1637281

@pure_code 是的，WebWorkers可以在后台加载脚本并使用消息传递，但这不是你的问题。 - loganfsmyth

对于那些可能会下意识地过度概括我提供的答案的人，我提前做了一些说明。 :) - user1637281

Answer 2

在脚本元素上使用innerHTML不受跨浏览器支持（包括Firefox iirc）的支持。我不建议采用这种方法。我建议改用eval或new Function。

innerHTML可以插入脚本吗？

- mwilcox

---

我只支持 IE10+ 及相似版本。 - user1637281