Question

请不要使用jQuery的建议，我很抱歉问这个问题，但是其他类似堆栈溢出之类的网站都没有一个能够解决这个问题，非常重要的是我很快就找到了答案，我一直坚持不懈

找到给出理想结果的答案。这是情况。我需要能够同时添加一个ajax响应，以允许在每个ajax响应中执行JavaScript，而不会在其中带来任何复杂性或不必要的JS重新触发。这是我尝试过的，我注意到的

内部HTML + =

导致ajax响应中的内容中断，例如iframe重新启动而JS重新启动，但仍附加ajax响应。

外部HTML + =

不会中断或刷新ajax响应位置之外的内容（例如iframe等）。但是Javascript无法正常执行或完全不起作用，这取决于使用哪种方法为ajax响应页面提供执行JavaScript的能力在其中。

插入AdjacentHTML

不会导致ajax响应内的内容中断，例如，iframe不会重新启动，而JS也不会重新启动，但仍会附加ajax响应，但会导致不必要的额外脚本执行，每次ajax响应超时都会在ajax响应内多次执行例如，当我第一次调用ajax响应时，它第二次完美运行，此时JS执行两次，第三次该ajax响应的JS执行3次，依此类推，每次调用每个ajax响应都应执行一次。

每当我接近时，这些方法都会出现诸如这些特征之类的不良现象，所以我想知道是这些方法还是我构造它们的方式，或者也许我需要另一种方法来实现我希望的行为。

我只需要附加一个没有iframe或JS等的ajax响应即可。每次新的ajax响应出现并附加时，该响应都不会被中断或重新启动，我只需要能够在内部执行JavaScript那些ajax响应页面在每个ajax响应调用中都不会重复一次，无论该ajax响应页面中是否有多个脚本标签，它都会在每个ajax调用中执行该页面上的所有脚本标签。

我想知道还有什么其他方法。

这是我的代码，其中没有任何失败的方法。

a.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;
        }

        button{
        display: block; 
        }

        #random{
        margin-top: 20px;
        margin-bottom: 20px;
        }

 </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').//Method to give a desirable appending effect described in the description???

          //Allow JS in the #ajax div* regardless if there is more than one script tag???

        }
      }

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

 });

        </script>

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


        <button id='random'>random</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>

<script>

document.querySelector('#random').addEventListener('click',random);

function random(){
alert('random');
}

</script>

附加ajax请求而没有不良结果

0 个答案: