Question

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

这个外部html文件本身可以正常工作，但当它被加载到主页面并点击链接时，谷歌表单将取代整个页面。知道我在这里做错了什么吗？

PS：我不是网络开发者，所以请忽略我可能违反的任何最佳做法：）

更新：

根据大卫的建议，我认为谷歌有一些代码导致框架被破坏。我将b.html中的所有代码复制到a.html中的div。所以现在只有一个文件 a.html 。默认情况下加载div中的此选项卡内容时，谷歌表单会正常呈现，但当我单击不同的选项卡然后单击默认选项卡上，然后单击谷歌表单时，它会再次突破该框架：（。看看google表单的源代码，我没有看到任何javascript打破框架... 任何想法？

Answer 1

我猜测在执行彩盒代码时它与文档的状态有关。 Colorbox是不引人注目的 - 这意味着如果插件失败（也就是标记尚未准备好），它将跟随链接，因为它从未被修改过。

例如，如果在执行$('#someElement').colorbox()时ajax调用未完成，则会出现问题。当您调用以异步方式获取页面/元素/时，这是一个常见问题。

此问题由事件解决......

我不确定'ajax标签'究竟是什么......但如果它有价值，它应该有一种'load complete'事件监听器，你可以添加colorbox初始化。使用jQuery ui选项卡（非常可靠......）你可以这样做......

提供回调函数

$( ".tabs" ).tabs({
   load: function(event, ui) { 
         //make sure the colorbox markup is in the tab being loaded
         if($(ui).find('.colorbox-class').length){
             $(".colorbox-class').colorbox()
         }
     }
});

OR - 初始化后的绑定

$( ".tabs" ).bind( "tabsload", function(event, ui) {
         //make sure the colorbox markup is in the tab being loaded
         if($(ui).find('.colorbox-class').length){
             $(".colorbox-class').colorbox()
         }
});

Answer 2

您使用的是DynamicDrive的ajaxTabs库吗？ http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

如果是这样，您加载的页面中的脚本可能没有运行，并且您点击的链接将恢复为其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并调用它找到的任何脚本标签。我不建议尝试重新发明该功能。

你能做的事情......

1）快速而肮脏的解决方案：改变这一行：

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

为：

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

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

2）使用更好的标签库（即jQueryUI内置的标签库：http://jqueryui.com/demos/tabs/）。将来更容易维护。

顺便说一下，我倾向于对DynamicDrive上的大多数事情现在已经过时，并且大部分时间偏离他们的解决方案。

Answer 3

听起来您正在将第三方内容加载到一个框架中，并且该内容包含一条指示，以便在遵循链接时突破框架。

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

Answer 4

它几乎听起来像是一个元素id冲突，因为在你使用id为'foo'的元素时，包含内容中的JS引用了一个id为'foo'的元素，但是不是那个元素是什么它预计，它会在你的元素上运行。只是预感。

您是否尝试使用Firebug或Chrome控制台在JS代码运行时逐步执行，以尝试查明导致恶意行为的线路或功能？知道行为的确切来源确实有助于结束行为。

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

4 个答案:

提供回调函数

OR - 初始化后的绑定