实习笔记05-子窗口获取父窗口元素

目录

一、场景描述

二、解决方案

三、js/jquery如何获取获取父窗口的元素

---

一、场景描述

        在做模板下载这个功能时，点击【导入】时，会弹出一个新窗口，在这个新窗口中点击【下载模板】时可以将父窗口中的模板下载下来。若依给的Demo中是不需要传递参数的，而是用一个实体记录需要下载的模板信息，在实体上对需要导出的列加上@Excel注解，如下图所示：

        而我们的【下载模板】需要做成通用模板下载，即对任意模板适用，且每个模板的实体属性不确定，有多少个实体不确定 ，这就需要在做下载的时候，传入模板id，拿到参数后查询模板列表，判断是否是一个模板（因为当前页也可能是一个普通的列表页），当是模板的时候，我们才做下载，如下图所示：

        现在的问题是，当点击【导入】之后，打开了一个新窗口，我们无法在新窗口中获取到原窗口的模板id，如下图所示：

二、解决方案

因为需要传递的参数在父模板中，当打开另一个窗口时，我们是不能直接用$("#元素id").val()拿到值的，这时就需要先拿到父模板元素，在根据id去查找我们需要的值，如下图：

 

js中的关键代码 ：

//从父模板中获取的templateId
var fatherSrc = window.parent.window[1].document.getElementById("dataIframe").src;
var templateId = fatherSrc.substring(fatherSrc.lastIndexOf("=") + 1);

 完整js代码截图如下：

       其实这种找元素然后截取自己需要的值的方式比较蠢，可能前端有对应的api可以让父模板向子模版传值，但前端知识比较薄弱，目前还是以解决问题实现功能为主。

三、js/jquery如何获取获取父窗口的元素

对应javascript版本为

window.parent.document.getElementById("父窗口元素ID");

取父窗口的元素方法：

$(selector, window.parent.document);

取父窗口的父窗口的元素就可以用：

$(selector, window.parent.parent.document);

类似的，取其它窗口的方法大同小异
获取iframe父窗体元素：

$(selector, window.parent.document);

获取通过windows.open()打开的父窗体：

$(selector, window.opener.document);

获取通过 showModelDialog()打开的父窗体：

$(selector, window.dialogArguments.document);

用于刷新父窗口整个页面：

window.parent.location.reload();

window插件关闭窗口,类似于window.close()：

parent.subWindow_add.Close();

刷新父页面中的id为“4thEditTable”的列表（局部刷新）：

parent.$("#4thEditTable").load(window.parent.location.href+" #4thEditTable");