时间戳

首页 > 解决方案 > 允许 JS 使用 insertAdjacentHTML (Plain JS) 在 AJAX .responseText 中运行的工作方法

javascript - 允许 JS 使用 insertAdjacentHTML (Plain JS) 在 AJAX .responseText 中运行的工作方法

问题描述

我阅读并尝试了许多来自帖子和谷歌的方法，关于如何让 AJAX.responseText允许 JS 运行，并且没有一个方法不起作用或给出故障结果我需要一个可以正常工作的工作方法insertAdjacentHTML。

代码

一个.php

<style>
  #main {
    max-height: 800px;
    width: 400px;
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: column-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: column-reverse;
    overflow: auto;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function(){ 

    document.querySelector('#executeAjax').addEventListener('click', sendAjax);

    function sendAjax(){
      var xhr= new XMLHttpRequest();
      xhr.onreadystatechange = function(){

        if(xhr.readyState === 4){
          document.querySelector('#ajax').insertAdjacentHTML('beforeend', xhr.responseText);
        }
      }

      xhr.open('POST','b.php'); 
      xhr.send();
    }

  });

</script>

<button id='executeAjax'>Execute</button>

<div id="main">
  <div id='ajax'></div>
</div>

b.php

<style>
iframe{
  display: block;
  width: 100px;
  height: 100px;
}
</style>

<script>
   alert('Hello');
</script>

<script>
   alert('Hello again');
</script>

<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

标签： javascriptajax

解决方案

在你有 insertAdjacentHTML-ed 之后，如何手动评估脚本。

document.querySelectorAll('#ajax script').forEach(script => {
    script.remove()
    eval(script.innerHTML)
})

推荐阅读