js子页面调用父页面方法
- 原创
- |
- 浏览：4544
- |
- 更新：
![js子页面调用父页面方法]()
1![js子页面调用父页面方法]()
2![js子页面调用父页面方法]()
3![js子页面调用父页面方法]()
4![js子页面调用父页面方法]()
5![js子页面调用父页面方法]()
6![js子页面调用父页面方法]()
7
今天工作的时候遇到一个新问题，当页面中存在iframe的时候，iframe里面的子页面该如何调用父级页面的方法呢？刚开始小编也是懵了，毕竟小编也少使用iframe框架制作页面，于是在小编绞尽脑汁之后，还好终于找到了“答案”，同时小编也对其他方式打开子页面的情况做了个小总结。
子页面在iframe
建立父级页面
首先建立一个父级页面parent.html,代码如图，一个pop函数方法，一个链接到child.html的iframe标签；
![js子页面调用父页面方法]()
建立子页面
再新建一个child.html页面，如图，展示一个id=link的div标签，和link的点击事件，因为是调用父级方法，所以需要用到window.parent.pop()方法。
![js子页面调用父页面方法]()
预览页面
预览页面，可明显看到parent.html里面的iframe框架，指向的就是child子页面
![js子页面调用父页面方法]()
错误提示
点击页面中“调用父级pop方法”的文字链，会提示错误，这是因为没配置好域名等相关设置。
![js子页面调用父页面方法]()
- 相关内容未经授权抓取自百度经验
站点配置
打开iis，右键iframe文件夹——“管理文件夹”——“浏览”；即可打开本地测试地址；（如小伙伴没配置iis，需要先配置iis建立站点）
![js子页面调用父页面方法]()
成功调用父级方法
再次点击“调用父级pop方法”的文字链，即可成功弹出提示；
![js子页面调用父页面方法]()
END
open打开的子页面
新建父页面
同样新建一个parent.html,创建一个pop方法和openchild方法，如图所示，child.html换成用open形式打开。
![js子页面调用父页面方法]()
新建子页面
同样新建一个child.html页面，如图，创建一个id=link的div标签和点击事件，因为是open方法打开的子页面，想调用父级，需要用到window.opener.pop()方法。
![js子页面调用父页面方法]()
浏览页面
浏览parent页面，并点击“父页面用open方式打开子页面”文字链；
![js子页面调用父页面方法]()
成功调用
这时就会弹出child子页面，再点击“调用父级pop方法”文字链，即可调用父页面的pop方法，如图所示；
![js子页面调用父页面方法]()
![js子页面调用父页面方法]()
END
