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 <中没有JavaScript / strong>页面正在运行。

以下是 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/

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

1 个答案: