window.parent 和 window.top方法的使用

window.parent 和 window.top方法的使用

 

      前一段时间在做搜狐家居商城申请入驻时用到了window.parent这一方法。

      由于上传图片的服务器是在另一域名上，和网站服务器是分开的。考虑到跨域。因此上传图片的form表单写到了一个单独的tpl文件中(http://jia.focus.cn/merchantapply/apply/1)页面(A)的上传营业授权资质Button时，打开一个弹层，用Firefox的fireBug查看html代码会发现在其它是弹出了一个带有Iframe的层.一切的图片上传的提交其实是在这个Iframe引入的tpl(B)文件里实现提交完成的。但要想要操作使这个页面父级页面[Iframe所在页面(B)]中的弹层(含有Iframe)，使之隐藏.那么这时就要用到window.parent方法了。

       其实上面可以简单理解成这样。在A页面中Iframe引入页面(B)中执行一个表单提交操作，但完成后需要再去页A中做一些DOM函数操作去隐藏这个Iframe层.

所以只能在Iframe的页面B中执行如下js操作, 如下图

<script type="text/javascript">
    $(window.parent.document).find('#box_business').hide();
</script>

相关方法补充如下：

"window.location.href"、"location.href"是本页面跳转

"parent.location.href"是上一层页面跳转

"top.location.href"是最外层的页面跳转

举例说明

如果A,B,C,D都是jsp，D是C的iframe，C是B的iframe，B是A的iframe，如果D中js这样写

"window.location.href"、"location.href"：D页面跳转

"parent.location.href"：C页面跳转

"top.location.href"：A页面跳转

如果D页面中有form的话,

<form>: form提交后D页面跳转

<form target="_blank">: form提交后弹出新页面

<form target="_parent">: form提交后C页面跳转

<form target="_top"> : form提交后A页面跳转