Question

好的我有这两个工作代码文件所以我决定在页面调用x.html上添加JavaScript，所以我希望在我按下页面调用index.html中的AJAX按钮后运行JavaScript所以一切都执行但是只有执行HTML才会在x.html上执行JavaScript。

所以我读到你必须使用eval（）来发出AJAX通知并在它调用AKA x.html的另一个页面上执行JavaScript。

.gif screenshot

这是代码

index.html

<script>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){
    if(xhr.readyState === 4){
        document.getElementById('ajax').innerHTML= xhr.responseText;
    }
};
xhr.open('POST','x.html');

function startAjax(){
    xhr.send();
document.getElementById('hide_button').style.display= 'none';
    }
    </script>
    <body>
    <button id='hide_button' onclick='startAjax()'>Start</button>
    <div id='ajax'></div>
    </body>

x.html

<!DOCTYPE html>
<html>
<head>
<script>
alert('hello');
</script>
</head>
<body>
<h1>Radom text</h1>
</body>
</html>

Answer 1

如何将文字放入iframe？

var idocument = $('iframe').prop('contentWindow').document;
idocument.body.innerHTML = xPhpText;

Answer 2

evalScripts = function (elm) {
    var scripts =  elm.querySelectorAll('script');
    var allScriptsText = '';
    for (var i = 0; i < scripts.length; i++) {
        if (scripts[i].hasAttribute("src")) { 
            // reapend script tag for execution of remote content
             var s = scripts[i], p = s.parentElement;
                 p.removeChild(elm);
                 p.appendChild(elm)
        }
        allScriptsText +=  scripts[i].innerHTML + ";";
    }
    // evaluate inline scripts
    allScriptsText.trim() && setTimeout(new Function(allScriptsText), 0);
};

现在在您的代码中使用

xhr.onreadystatechange= function(){
   if(xhr.readyState === 4){
       var elm  = document.getElementById('ajax');
           elm.innerHTML= xhr.responseText;
           evalScripts(elm);

   }
};

Answer 3

这次我想出来了。 @Barmar向我表达了我最近提供的最后一个代码解决方案的缺点。我找到了一种让AJAX在另一个页面中执行JS的方法，但是@Barmar告诉我，我最近使用它的方式只会导致一个脚本标记集被执行。

所以我找到了一种方法来使用多个脚本标记集。所以这是适用于我的解决方案。

index.html

 <script>
    var xhr= new XMLHttpRequest();
    xhr.onreadystatechange= function() {
        if(xhr.readyState === 4) {
            document.getElementById('ajax').innerHTML= xhr.responseText;
            // get every <script>
            var exJs = document.getElementsByTagName('script');
            var enableAll = null;
            for (var i = 0; i < exJs.length; i++) {
                // add the <script> contents into enableAll variable
                enableAll += exJs[i].innerHTML;
            }
            eval(enableAll); // eval enables js to be read on the other page
        }
    };

    xhr.open('POST','x.html');
    function sendAjax(){
        xhr.send();
        document.getElementById('hide').style.display= 'none';
    }
    </script>
    <button id='hide' onclick='sendAjax()'>Go</button>
    <div id='ajax'></div>

<强> x.html

<!DOCTYPE html>
<html>
<head>
<script>
alert('hello');
</script>
<script>
alert('hello again');
</script>
</head>
<body>
<h1>Random text</h1>
</body>
</html>

如何使用AJAX调用包含JavaScript的HTML页面并使JS工作？

3 个答案: