关于iframe页面式后台管理系统中父子页面互相获取元素问题以及获取index页面导航栏元素等问题

关于iframe页面式后台管理系统中父子页面互相获取元素问题

接触了很多后台管理系统，大多为下图所示的左右布局页面，同时页面核心加载采用iframe嵌套

在实际开发中，有时某一个iframe子菜单页面中操作后需要跳转到另一个菜单中，例如：在新增招标项目页确认新增后需求跳转到招标信息列表页，思路无非是在新增数据页获取index页面招标信息列表的元素，触发它的点击事件。但此时因为是使用框架，无法获取父页面也就是index页面的元素，报错Uncaught DOMException: Blocked a frame with origin “null” from accessing a cross-origin frame

该问题是因为本地获取跨域，其实很容易解决，方法照样写，待项目打包与给后端部署后，就不存在报错。

这里记录下iframe父子页面获取元素的dom方法及jquery方法

dom方法

• 父页面获取子页面元素
• document.getElementById('父页面中iframe标签ID').contentWindow.document.getElementById('要获取的子页面元素ID')
• 子页面获取父页面元素
• window.parent.document.getElementById("要获取的父页面元素ID");

jqury方法

• 父页面获取子页面元素
• $("#父页面中iframe标签ID").contents().find("#要获取的子页面元素ID")
• $("#要获取的子页面元素ID",document.frames('iframename').document)
• 子页面获取父页面元素
• $('#要获取的父页面元素ID', parent.document);

引入他人博客