如何让HTML中通过innerHTML插入的脚本也能够运行起来？
内容提要
在Web开发中，通过innerHTML插入的脚本不会自动执行，为了解决这个问题，可以使用eval函数执行脚本或者动态创建<script>元素并添加到页面中。另外，可以使用async或defer属性加载外部脚本，确保执行顺序。需要注意安全性和性能优化。
延伸解读
浏览器为何阻止 innerHTML 脚本执行
浏览器将 innerHTML 插入的 <script> 标签视为静态内容，不会自动执行，这是出于安全策略，防止恶意代码和跨站脚本攻击（XSS）。理解这一点有助于开发者明白，并非 innerHTML 功能有缺陷，而是浏览器有意为之的安全设计。因此，任何让脚本运行的方法，本质上都是在绕过这一默认限制，必须谨慎评估风险。
eval 与动态创建 script 的取舍
使用 eval 执行插入的脚本虽然直接，但会带来显著安全风险，且可能影响性能。相比之下，通过 document.createElement 创建 <script> 元素并 appendChild 到页面，浏览器会将其视为新加载的脚本自动执行，安全性更高。文章推荐后者，但无论哪种方式，都应确保代码来源可信，避免处理不受信任的用户输入。
async 与 defer 对执行顺序的影响
当动态插入外部脚本时，async 和 defer 属性可以控制加载与执行时机。async 表示脚本异步加载，加载完立即执行，不保证顺序；defer 表示延迟到文档解析完成后按顺序执行。若脚本之间存在依赖关系，应使用 defer 或确保顺序，否则可能因执行时机不确定导致错误。
性能与框架替代方案
频繁使用 innerHTML 和 eval 可能影响页面性能和加载速度，尤其应避免在关键路径上执行。对于复杂应用，文章建议考虑现代前端框架（如 React、Vue），它们提供了更安全高效的方式来处理动态内容和脚本。在实际开发中，应根据具体场景选择合适方法，并始终关注安全性与性能优化。
Q&A
为什么通过innerHTML插入的脚本不会自动执行？
因为浏览器的安全策略会将通过innerHTML插入的脚本视为静态内容，以防止恶意代码和跨站脚本攻击（XSS）。
如何使用eval函数执行innerHTML插入的脚本？
可以使用eval函数来执行插入的脚本，例如：eval(document.getElementById('targetElement').querySelector('script').innerText);
动态创建<script>元素有什么好处？
动态创建<script>元素可以避免直接使用innerHTML带来的安全风险，并且浏览器会自动执行其中的代码。
async和defer属性在加载外部脚本时有什么区别？
async属性表示脚本异步加载并立即执行，而defer属性表示脚本延迟加载，直到文档完全解析后才执行。
使用innerHTML和eval可能带来哪些性能影响？
频繁使用innerHTML和eval可能会影响页面性能和加载速度，因此应谨慎使用。
在处理动态内容时，推荐使用哪些现代前端框架？
推荐使用React、Vue等现代前端框架，它们提供了更安全高效的方法来处理动态内容和脚本。
