Jquery 通过ajax加载外部页面（包含ajax）

我有一个工作网页，它只在一个div中显示外部html文件（使用ajaxtabs..根据单击的菜单项）。整个设置工作正常，但其中一个外部html文件使用colorbox（jquery插件）在模式窗口上显示嵌入的google表单（单击链接时）

这个外部html文件本身工作正常，但当它加载到主页上并单击链接时，google表单将替换整个页面。你知道我可能做错了什么吗

PS：我不是web开发人员，所以请忽略我可能违反的任何最佳实践：）

更新：

根据David的建议，我假设google有一些导致框架被破坏的代码。我将所有代码从b.html复制到a.html中的一个div中。所以现在只有一个文件a.html。默认情况下，当从div加载此选项卡内容时，google表单呈现良好，但当我单击不同的选项卡，然后单击默认选项卡上的上一步，然后单击google表单时，它再次脱离框架：（。 查看google表单的源代码，我没有看到任何javascript破坏框架。。。

---

有什么想法吗？

听起来像是在将第三方内容加载到一个框架中，并且该内容包括一条在链接之后跳出框架的指令

---

无法阻止这种情况，因为内容不在您的控制之下。

听起来似乎存在元素id冲突，因为您使用的是id为“foo”的元素，包含内容中的JS引用了id为“foo”的元素，但该元素不是它所期望的，而是在您的元素上运行。Ju我有预感

---

您是否尝试过使用Firebug或Chrome的控制台在JS代码运行时对其进行逐步检查，以试图找出导致流氓行为的行或函数？确切了解行为的来源确实有助于结束这种行为。

我猜这与您执行t时文档的状态有关colorbox代码。colorbox是不引人注目的-这意味着如果插件失败（也称为标记未就绪），它将跟随链接，因为它从未被修改过

例如，如果在执行

$（“#someElement'）.colorbox（）

时ajax调用尚未完成，则会出现问题。当您调用以异步方式获取页面/元素/任何内容时，这是一个常见问题

这个问题通过事件解决

我不确定“ajax选项卡”到底是什么…但是如果它有价值的话，它应该有一种“加载完成”的事件监听器，您可以添加colorbox初始化。使用jQuery ui选项卡（非常可靠…），您可以这样做

提供一个回调函数 初始化后的OR-绑定

---

您正在使用DynamicDrive的ajaxTabs库吗

如果是这样，则可能是您正在加载的页面中的脚本没有运行，并且您正在单击的链接正在恢复为其href，而不是像应该的那样使用onclick事件

从DynamicDrive的源代码中，调用以下函数将内容加载到选项卡：

ddajaxtabs.loadpage=function(page_request, pageurl, tabinstance){
    var divId=tabinstance.contentdivid
    document.getElementById(divId).innerHTML=ddajaxtabssettings.loadstatustext //Display "fetching page message"
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
        document.getElementById(divId).innerHTML=page_request.responseText
        ddajaxtabs.ajaxpageloadaction(pageurl, tabinstance)
    }
}

如您所见，这只是设置了目标元素的innerHtml属性。innerHtml的一个已知副作用是，在以这种方式更新属性时，它不会自动执行脚本标记。JQuery内置了额外的逻辑，基本上可以逐步执行新的HMTL并调用它找到的任何脚本标记。我不建议使用attempti我们需要重新设计这个特性

你能做的事

1） 快速而肮脏的解决方案： 更改此行：

document.getElementById(divId).innerHTML=page_request.responseText

致：

在不更改现有代码的情况下获得jQuery的强大功能。DD的代码可能在其他地方也被破坏了

2） 使用更好的选项卡库（即jQueryUI:中内置的选项卡库）。将来更易于维护

---

顺便说一句，我倾向于认为DynamicDrive上的大多数内容现在都过时了，并且大部分时间都偏离了他们的解决方案。

David：是的，我正在将google表单加载到iframe中。假设我在b.html中这样做，然后将b.html加载到a.html中。当我直接访问b.html时，我看到了正确的行为，但当我直接访问a.html时，我看不到正确的行为。如果你说的是真的，那么它对b.html也不起作用，对吗？如果你直接访问b.html，那么就没有一个框架可以打破。所以它仍然占据了整个窗口。大卫：谷歌表单是在b.html中的iframe上加载的。b、 然后将html加载到a.html中。当直接访问b.html并加载iframe时，它不会占据整个窗口。（b.html稍后加载到a.html中）我认为这与框架的内容无关。查看colorbox示例--并单击其中一个底部链接（html-iframe之外），您可以提供指向工作副本或某些代码的链接吗？？谢谢：）你用什么浏览器测试这个？下面的一个答案表明存在元素Id冲突。不同浏览器的操作方式可能有所不同——FireFox通常比IE.Ok更宽容。。解决方案一并不完全有效，但我还是接受了。更改解决方案1中提到的行，框架正确打开，但没有按预期加载表单。。我正在使用DD的标签，当我决定使用它时，我似乎有点近视（可能现在踩到了另一个bug）。我会和jqueryui一起去。

ddajaxtabs.loadpage=function(page_request, pageurl, tabinstance){
    var divId=tabinstance.contentdivid
    document.getElementById(divId).innerHTML=ddajaxtabssettings.loadstatustext //Display "fetching page message"
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
        document.getElementById(divId).innerHTML=page_request.responseText
        ddajaxtabs.ajaxpageloadaction(pageurl, tabinstance)
    }
}

document.getElementById(divId).innerHTML=page_request.responseText

$("#" + divId).html(page_request.responseText);