通过innerHTML写入含函数调用的内容后，JS函数会执行吗？

我编写了一段JS代码，用于修改div的innerHTML，该innerHTML中包含JS函数validate_signup_password的调用，且该函数定义在同一个.js文件中。请问修改完innerHTML后，该函数会被执行吗？

function startup(mode) {
  return function () {
    if (mode == "login") {
      document.getElementById("main").innerHTML = `                                                                                                                               
<div class="grid-auth">                                                                                                                                                           
<div class="item3">                                                                                                                                                               
<form action="/login.pl">                                                                                                                                                         
<label for="username">Nome de usuário</label>                                                                                                                                     
<input type="text" id="login_username" name="login_username" required>                                                                                                            
<label for="login_password">Senha</label>                                                                                                                                         
<input type="password" id="login_password" name="login_password" required>                                                                                                        
<input type="submit" value="Iniciar sessão">                                                                                                                                      
</form>                                                                                                                                                                           
</div>                                                                                                                                                                            
<div class="item4">                                                                                                                                                               
<form action="/login.pl">                                                                                                                                                         
<label for="username">Nome completo</label>                                                                                                                                       
<input type="text" id="name" name="name" required>                                                                                                                                
<label for="username">Nome de usuário</label>                                                                                                                                     
<input type="text" id="signup_username" name="signup_username" required>                                                                                                          
<label for="email">Email</label>                                                                                                                                                  
<input type="email" id="email" name="email" required>                                                                                                                             
<label for="signup_password">Senha</label>                                                                                                                                        
<input type="password" id="signup_password" name="signup_password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}.{?=.*[!@#$%^&.?]" title="Deve conter pelo menos um número, uma letra maiúscula, uma letra minúscila, um dos símbolos !?@#$%^&. e pelo menos 8 caracteres" required>                                                                                
<input type="submit" value="Criar conta">                                                                                                                                         
</form>                                                                                                                                                                           
</div>                                                                                                                                                                            
<div class="item5" id="message">                                                                                                                                                  
<h3>Password must contain the following:</h3>                                                                                                                                     
<p id="letter" class="invalid">Uma letra <b>minúscula</b></p>                                                                                                                     
<p id="capital" class="invalid">Uma letra <b>maiúscula</b></p>                                                                                                                    
<p id="number" class="invalid">Um <b>número</b></p>                                                                                                                               
<p id="symbol" class="invalid">Um <b>símbolo</b></p>                                                                                                                              
<p id="length" class="invalid">Mínimo <b>8 caracteres</b></p>                                                                                                                     
</div>                                                                                                                                                                            
</div>                                                                                                                                                                            
<script>validate_signup_password()</script>`;
    } else {
      document.getElementById("main").innerHTML = "<h1>Olá mundo</h1>";
    }
  }
}

function validate_signup_password () {
 ...
}

不会执行。

原因 #

浏览器在处理innerHTML插入的内容时，不会解析并执行其中的<script>标签代码。这是浏览器的安全限制，同时也是DOM解析的既定规则——通过innerHTML动态插入的脚本不会被触发执行。

更可靠的实现方式 #

既然validate_signup_password函数已经在当前JS文件的全局作用域中定义，直接在设置完innerHTML后手动调用即可，完全不需要在HTML字符串里嵌套<script>标签：

function startup(mode) {
  return function () {
    if (mode == "login") {
      document.getElementById("main").innerHTML = `/* 你的HTML内容（去掉末尾的<script>标签） */`;
      // 直接调用函数
      validate_signup_password();
    } else {
      document.getElementById("main").innerHTML = "<h1>Olá mundo</h1>";
    }
  }
}

如果确实需要通过动态脚本标签执行（不推荐这种场景），可以手动创建script元素并添加到DOM中：

const script = document.createElement('script');
script.textContent = 'validate_signup_password()';
document.getElementById("main").appendChild(script);

但显然第一种直接调用的方式更简洁、高效，也更符合代码逻辑。

内容的提问来源于stack exchange，提问作者Marcos Camargo