如图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/84030ab6fd4ca2e4cb32328fbc6877c4.png#pic_center)
需求:当在子iframe中增删改的操作时,父页面的导航栏要实时变化。
父页面的导航栏通过请求接口 来layui的模板引擎动态渲染的
父页面的动态模板 ↓ ↓ ↓
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2199abe90175526a68f8fb097f0e6afd.png)
父页面装载的 ↓ ↓ ↓
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/747a08da2faa184e34847fe46c12b84f.png)
一般情况下的js 模板引擎用法
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1d9361b1d63743dfb8bd1ca3f4568d93.png)
但这里是子页面的操作来改变父页面的内容
所以需要找到父页面的相关元素
所以 由
[data-role="nav"]
变为 $("[data-role='nav']", window.parent.document)
#navigation
变为 $("#navigation", window.parent.document)
这样就可以操作父页面的元素了
重点
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8a774b8a783aab3203585af7c0bb3aa5.png)
文档参考