执行 innerHTML 里的 <script>
背景
有时候我们会有把一整段 HTML 动态塞进页面的需求，例如渲染了一个模板，从服务器端获取了一段广告代码等。一般情况下我们使用 container.innerHTML 即可。但是当 HTML 中出现 script 标签时，直接使用 innerHTML 并不会执行它。
一个例子
<div id="test">Hello HTML</div>
<script>
document.getElementById('test').innerHTML = 'Hello JS';
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script>
ReactDOM.render(React.createElement('div', null, 'Hello React'), document.getElementById('test'));
</script>
一个常见的例子里包含普通的 HTML 内容，<script> 里的 inline script，通过 src 引用的外部 script。如果我们尝试直接用 innerHTML 赋值只会得到一个 Hello HTML。而后面的 <script> 标签无一例外没有执行。
appendChild
我们知道通过 appendChild 把 <script> 标签直接塞进页面是可以执行和加载里面的 js 的（JSONP就是通过这种方法实现的，参见之前的文章：JSONP 的实现 - 知乎专栏。
所以其实我们需要做的就只是把所有的 <script>找出来，然后通过 appendChild 塞到页面里即可。
function runScript(script){
// 直接 document.head.appendChild(script) 是不会生效的，需要重新创建一个
const newScript = document.createElement('script');
// 获取 inline script
newScript.innerHTML = script.innerHTML;
// 存在 src 属性的话
const src = script.getAttribute('src');
if (src) newScript.setAttribute('src', src);
document.head.appendChild(newScript);
document.head.removeChild(newScript);
}
function setHTMLWithScript(container, rawHTML){
container.innerHTML = rawHTML;
const scripts = container.querySelectorAll('script');
for (let script of scripts) {
runScript(script);
}
}
执行顺序
当我们尝试用上面的 setHTMLWithScript(document.body, html) 时有一个问题，就是 script 的加载和执行并非同步的，我们会得到一个 Hello, JS。
而下面的 <script> 依赖前面的 <script> 执行加载完成是一个非常常见的需求，因为在正常的静态网页里就是这样的，虽然所有的远程脚本都是异步加载的，但后面的 <script> 会等待前面的加载执行后才开始执行。
为了让异常处理和异步流程的控制更方便，我们让 runScript 返回一个 Promise，然后只需要一个简单的 reduce 就可以把异步逻辑串联起来：
function runScript(script){
return new Promise((reslove, rejected) => {
// 直接 document.head.appendChild(script) 是不会生效的，需要重新创建一个
const newScript = document.createElement('script');
// 获取 inline script
newScript.innerHTML = script.innerHTML;
// 存在 src 属性的话
const src = script.getAttribute('src');
if (src) newScript.setAttribute('src', src);
// script 加载完成和错误处理
newScript.onload = () => reslove();
newScript.onerror = err => rejected();
document.head.appendChild(newScript);
document.head.removeChild(newScript);
if (!src) {
// 如果是 inline script 执行是同步的
reslove();
}
})
}
function setHTMLWithScript(container, rawHTML){
container.innerHTML = rawHTML;
const scripts = container.querySelectorAll('script');
return Array.prototype.slice.apply(scripts).reduce((chain, script) => {
return chain.then(() => runScript(script));
}, Promise.resolve());
}
得到预期的 Hello React。
其实这里有一点和直接渲染不一致的地方，就是脚本的加载也是同步的，后面的脚本会等待之前的脚本执行完才会加载，不过从 js 层面似乎没有办法解决这个问题。
JQuery.html
熟悉 JQuery 的同学可能知道 $.html 其实会直接执行里面的 <script> 标签，不过是同步的，在 $.html 的代码中，可以看到 jQuery 判断满足一定条件下直接使用 innerHTML，随便执行一个 $('body').html(test<script></script>) 然后打个断点，
可以看到这里做了一个简单的正则判断，如果碰到 <script><style><link> 标签就用 jQuery 自己实现的 append，继续追踪下去，
显然 jQuery 在这里完全没有考虑 <script> 前后的依赖。对于 inline script 的标签也是直接通过 eval 实现的而不是新建一个插入到文档里。
JQuery 也有几个 issue 讨论是否要按照顺序执行，但最后决定保持现状：Scripts in inner html are not exectuted sequentially in order · Issue #2538 · jquery/jquery。
其他
createContextualFragment
除了写进去再用 querySelectorAll 把 script 全都拿出来复制一遍外，IE11 以上的浏览器也可以通过 createContextualFragment 直接把 html 转换成 DOM 节点然后 append 到页面上：
var tagString = "<div>I am a div node</div><script>console.log('test')</script>";
var range = document.createRange();
// make the parent of the first div in the document becomes the context node
range.selectNode(document.body);
var documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment)
也可以用这种方法来实现上面的功能。
兼容性
上面的代码都只是顺手的探索，没有考虑兼容性方面的问题，例如 IE 不支持 script 的 onload 事件等，可能需要 onreadystatechange 来实现。
DOMContentLoaded
DOMContentLoaded 早已经完成，如果有需要，我们可能要在脚本加载完成后，重新触发一下
setHTMLWithScript(document.body, rawHTML)
.then(() => {
var DOMContentLoadedEvent = document.createEvent('Event');
DOMContentLoadedEvent.initEvent('DOMContentLoaded', true, true);
document.dispatchEvent(DOMContentLoadedEvent);
})
document.write
在静态页面中，<script> 标签里如果出现 document.write，会直接在 <script> 插入的位置写入，这种方法常被用于广告投放脚本来定位自己的位置。
而当我们在动态插入时文档已经关闭，会直接 write 到整个页面上，如果有必要可以暂时替换 document.write 来实现。
getCurrentScript
getCurrentScript 是另一个定位 <script> 标签所在位置的方法，之所以不太常用是因为 IE 不兼容它，如果我们要考虑兼容这个方法新产生的 <script> 标签就不应该往 <head> 里 append，而是插入到原来所在的位置。
总结
以上方法都只是模拟静态 <script> 解析的过程，一般来说我们不要求行为完全一致（毕竟跨域异步加载同步执行这点 JS 就无法模拟），但是可以按照我们的需求去实现它的行为。
这种方法也只适用于一部分场景，如果有更复杂的 JS 动态加载需求应该考虑使用 requirejs 等 AMD Loader。
