JavaScript 没有在 Ajax 加载的内容上执行（没有 jQuery）

Question

我遇到了一个问题，我正在使用 JavaScript 将 ajax HTML 内容加载到我的页面上的元素中，并尝试在加载的内容中执行 JavaScript，这不起作用。

我没有（也不能）在这个项目中使用 jQuery。

我用来加载 ajax 内容的 JavaScript 如下所示：

var loadedobjects = "";
var rootDomain = "http://" + window.location.hostname;

function ajaxPage(url, containerId){
    var pageRequest = false;
    pageRequest = new XMLHttpRequest();

    pageRequest.onreadystatechange = function(){
        loadpage(pageRequest, containerId);
    }

    preventCache = (url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime();
    pageRequest.open('GET', url+preventCache, true);
    pageRequest.send(null);
}

function loadpage(pageRequest, containerId){
    if (pageRequest.readyState == 4 && (pageRequest.status==200 || window.location.href.indexOf("http") == -1)){
        document.getElementById(containerId).innerHTML = pageRequest.responseText;
    }
}

如您所见，我将（HTML 页面的）URL 传递给函数ajaxPage()

ajaxPage() 函数在单独的 .js 文件中被调用，如下所示：

ajaxPage('test.html', 'ajax-wrapper');

哪个有效，test.html 正在加载到 id 为“ajax-wrapper”的元素中，但 test.html 页面正在运行。

这是 test.html 页面的样子（只是纯 HTML）：

<div class="t-page-title">
    View Thread
</div>

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

即使是加载的 HTML 上的简单 alert('hello'); 也不会触发。该页面没有被缓存，所以这不是问题。如果我使用 jQuery，我会知道该怎么做，但我对找到仅 JavaScript 的解决方案感到有些困惑。有什么建议吗？

Answer 1

当您使用 innerHTML 时，标签会被复制到目标元素，但不会执行脚本。您需要额外的 eval 步骤来执行脚本。

jQuery 有一个名为 globalEval 的函数，如果没有 jQuery，你需要自己编写。

[更新] 以下是 iframe 的变体，可能有助于解决您的问题：http://jsfiddle.net/JCpgY/

在你的情况下：

ifr.src="javascript:'"+pageRequest.responseText+"'";

div 的标准行为：http://jsfiddle.net/JCpgY/1/