[原创]关于Iframe中使用thickbox调用parent.tb_remove()方法无效的解决办法

最近在网站开发过程中,涉及到thickbox弹出选择商品对话框然后添加到购物清单,并关闭弹出框的功能,因为后台是iframe框架结构,代码如下:

 

上方是导航nav,左侧是菜单menu,右侧才是操作区域,要实现的弹出thickbox框的操作是在右侧iframe中进行的,首先利用按钮弹出thickbox层,代码如下:

<span class="kwd">function</span><span class="pln"> </span><span class="typ">Search</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="com">//tb_init("search");</span><span class="pln">
tb_show</span><span class="pun">(</span><span class="str">"搜索结果"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"/goods/search?width=800&amp;telOrder=1&amp;keyType="</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"#keyType"</span><span class="pun">).</span><span class="pln">val</span><span class="pun">()</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"&amp;keywords="</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> encodeURI</span><span class="pun">(</span><span class="pln">$</span><span class="pun">(</span><span class="str">"#keywords"</span><span class="pun">).</span><span class="pln">val</span><span class="pun">()),</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">);</span><span class="pln">
 
</span><span class="pun">}</span>

然后search.aspx页面中选中checkbox的click事件,异步提交商品信息到后台保存,然后关闭当前层,代码如下:

<span class="kwd">function</span><span class="pln"> </span><span class="typ">AddToOrder</span><span class="pun">(</span><span class="pln">id</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd">if</span><span class="pun">(</span><span class="pln">$</span><span class="pun">(</span><span class="str">"#"</span><span class="pun">+</span><span class="pln">id</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">"checked"</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="com">//alert($("#" + id).attr("checked"));</span><span class="pln">
$</span><span class="pun">.</span><span class="pln">post</span><span class="pun">(</span><span class="str">"/order/addtoorder"</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> goodsId</span><span class="pun">:</span><span class="pln"> id </span><span class="pun">},</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="com">//alert(data);</span><span class="pln">
parent</span><span class="pun">.</span><span class="pln">tb_remove</span><span class="pun">();</span><span class="pln"> </span><span class="com">//注意这里是错误的,因为iframe的原因parent获取的是整个窗口,而不是当前的iframe中的页面</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> </span><span class="str">"json"</span><span class="pun">);</span><span class="pln">
 
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span>

注意:parent.tb_remove();这句是不能关闭当前窗口的,因为当前页面是在iframe中,parent获取的是整个窗口,需要再调用右侧iframe才是真正的thickbox的parent页面

改成如下代码,可以成功关闭thickbox:

<span class="pln">parent</span><span class="pun">.</span><span class="pln">frames</span><span class="pun">[</span><span class="lit">2</span><span class="pun">].</span><span class="pln">tb_remove</span><span class="pun">();</span>
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

登录

注册