0

我遇到了一个问题，我正在使用 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页面中的 JavaScript 没有工作。

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

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

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

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

4

1 回答 1

1

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

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

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

在你的情况下：

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

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

于 2012-12-12T21:48:47.520 回答