记录问题：layer弹出层ifame子页面和父页面交互

最新推荐文章于 2024-10-21 19:01:08 发布

Zhunh_

最新推荐文章于 2024-10-21 19:01:08 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：项目日记

本文链接：https://blog.youkuaiyun.com/qq_22656233/article/details/79631390

项目日记专栏收录该内容

18 篇文章

订阅专栏

本文解决了一个具体的技术问题：在一个使用layer弹出层的页面中，如何实现在iframe内表单提交后，关闭弹出层并刷新父页面的数据。通过调整后台返回逻辑及使用JavaScript直接刷新页面的方法，最终实现了需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.问题描述：

项目有个页面用layer弹出层，嵌入一个iframe（content是单独的一个页面），iframe子页面是一个表单，有提交按钮。提交表单到后台，后台controller返回一个ModelAndView（redirect:父页面url）。想实现表单提交完之后layer弹出层关闭且父页面刷新数据。结果是弹出层里面刷新为父页面，且未关闭。

2.解决思路：

想了办法在提交按钮之后写刷新语句，总是会页面刷新而数据没刷新，需要手动再刷新页面数据才会出来。感觉总是缺一个回调函数来写入刷新语句。

解决：controller里面不返回ModelAndView，而是向页面写入刷新父页面命令：parent.window.localtion.reload();

    PrintWriter pw = res.getWriter();
    pw.print("<script>parent.window.localtion.reload();</script>");
    pw.flush();
    pw.close();

3.过程中试过父页面获取子页面的元素：

var iframe=window.document.getElementById("iframe的id");

var ele=iframe.document.getElementById("iframe页面的元素id");

4.总结

layer弹出层可以用div而不用iframe，但是遇到这个新的问题，就还是找下解决方法。。

以上都是同域下父页面和子页面的交互。

iframe这块用得少，记录下。

发现之前习惯了用Jq操作DOM，JS原生的方法也很强大啊。