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

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

        页面几种方式:

          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(此时为父级窗体。)

 

你可能感兴趣的:(js中几种父子窗口的交互总结)