js中几种父子窗口的交互总结

本文详细介绍了页面父子间数据交互的方法,包括使用open方法、iframe加载和模式对话框打开页面等场景,并提供了实际示例帮助理解。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        最近再做项目中,经常需要在页面的父子页面之间进行数据的交互和方法的调用,在这里做些简单的总结以备不时之需。

        页面几种方式:

          1.采用open方法打开的新页面和原页面的交互:采用这种方式,可以在子页面中调用opener属性获取父级打开页面。原则上将该方法返回一个新打开的窗体对象,这时需要注意的是如果打开的窗体路径和父级窗体所处的域不同的话,是不能操作子窗体数据的。

          2.采用iframe方式加载的子页面:我们可以在子页面中采用parent获取父级页面的window对象,注意在api中说明:document中的parent指的是包含该文档的窗体,窗口的parent对象则是指上级父窗体。需要额外注意的是即使是单独的窗体它的父级window也总是不为空的。而且从测试上看,单页面的父级窗体总是包含子页面的全局变量,二者好像是共享的(这点不确定,希望大神给予指正。),注意这里的top指定的是定级窗口。在父级窗口中可以使用document.frames[frameid]获取子窗体的数据。

        3.采用模式对话框的形式打开的页面,我们可以通过showmodalDialog方法的第二个参数向子页面传参,可以将window本身传过去,通过returnValue向父级页面传递参数。

      例子:

        1. var win = window.open(url); win...    

             在子页面中可以window.opener获取父级窗体也可以通过top获取顶级窗体

        2.document.frames[id].document 和window.parent

        3.var res = window.showModalDialog(url,window);  子:window.dialogArguments(此时为父级窗体。)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值