当使用jquery.load一个页面到当前页面或直接弹出div中含有iframe,但关闭这个div时,iframe并没有被从DOM移除,而下次触发函数创建此 IFrame 的时候,使会产生 DOM 冲突,所以解决方法就是在移除父层的 DIV 的时候,先将内部的 IFrame 也移除,于是问题解决了。
这个是 IE 下的 BUG,正常情况下在移除一个元素的时候,其子节点下的元素应该是全部会被从 DOM 中移除的,但是无论如何,还是建议先移除子节点下的重要元素,毕竟这也不影响其它的浏览器.
解决办法:在关闭弹出窗体事件 box.remove(); 前面加入box.find('iframe').remove();
我幼教项目关于colorbox或者jquery.load页面,要在跳转前将含有iframe移除。
$("#input_submit").click(function() { if($(this).hasClass("f_wait")){ return false; } var $this = $(this); $this.addClass("f_wait"); $tabInput=$("#tb_input"); if ($tabInput.valid()) { //验证内容是否为空 var content = document.getElementById("ewebeditor").contentWindow.getHTML(); if(content==null || content==''){ $("<br/><label id='valiBody' class='error'>资源内容不能为空!</label>").insertAfter("#ewebeditor").fadeOut(5000); $this.removeClass("f_wait"); $.colorbox.resize(); return false; } $('#info\\.content').val(content); url = $tabInput.attr("action"); $tabInput.ajaxSubmit({ url : url, success : function(data) { $tabInput.find('iframe').remove(); $.ajax({ url : "${ctp}/RepositoryAction!list.action", success : function(data) { refresh_tblist(data,true,'保存成功!'); }, error:function(){ refresh_tblist(data,true,'保存失败!'); } }); }, error : function() { alert("system busy"); }, complete : function(){ $this.removeClass("f_wait"); } }); }else{ $(this).removeClass("f_wait"); } return false; });
$tabInput.find('iframe').remove();移除即可。