首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在iframe中提交后刷新iframe父页面?

要在iframe中提交后刷新iframe父页面,可以使用JavaScript来实现。在iframe中,可以使用window.parent.location.reload()方法来刷新父页面。

具体实现方法如下:

  1. 在iframe中的表单提交事件中,添加一个JavaScript代码,调用window.parent.location.reload()方法。

例如,可以在iframe中的HTML代码中添加一个表单提交事件,如下所示:

代码语言:html
复制
<form onsubmit="refreshParentPage()">
  <!-- 表单内容 -->
 <input type="submit" value="提交">
</form><script>
function refreshParentPage() {
  window.parent.location.reload();
}
</script>
  1. 当用户提交表单后,父页面将会刷新。

需要注意的是,如果父页面和iframe中的页面不在同一个域下,由于浏览器的同源策略,这种方法可能会无法实现。在这种情况下,可以考虑使用跨域通信的方法来实现。

例如,可以在父页面中添加一个函数,用于刷新页面:

代码语言:javascript
复制
function refreshPage() {
  window.location.reload();
}

然后,在iframe中的表单提交事件中,使用window.parent.refreshPage()方法来调用父页面中的函数,刷新父页面。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

iframe实现页面局部刷新原理解析

web开发实现页面的局部刷新的技术,除了比较常见的ajax,还有通过iframe来实现,这种方式和ajax有什么不同呢首先看一个用ajax技术实现的页面局部刷新的效果——表单登陆。...width="0" height="0" frameborder="0" name="myframe"> 页面首先是一个表单,这个表单与以往表单不同的是...如果表单元素没有target这个属性,表单提交,当前页面会发生跳转;如果有了target属性,页面就不会发生跳转,这种情况下服务端返回的东西输出到哪里呢?...同样实现了页面的局部刷新,而且用的不是ajax技术。...原理是将表单提交跳转的页面,指向本页的iframe标签iframe刷新,返回的是后端输出的javascript标签包裹的js代码,而返回的javascript代码可以直接运行,并且可以操作页面的元素

4.9K30

基于iframe的跨域与更新窗体地址栏的解决方案

在访问到内部某个页面,希望窗体的地址栏跟随子窗体内部src,同时更新窗体的地址栏,再刷新页面可以保持在当前访问的页面,同时可以分享链接。...2.3 解决iframe实现刷新页面保持 针对上面的问题,我的解决方法是:第一,每次在iframe内部页面跳转,获取到iframe内跳转最新的src值。...实际上iframe内部页面点击链接后会发生跳转的动作,如果这时又再次刷新页面,让用户本来已经看到页面跳转,再看到重新刷新页面,从用户体验上考虑并不好。...这样每次iframe内部的src发生变化,都会相应修改窗体的地址栏,但又不会去刷新当前页面,效果上看起来就像是在自己的页面操作,感受不到跨站点的问题。...每次刷新页面,在页面初始化时,就根据当前窗体的地址栏的url去得到属于运维平台的location.search值,用这个值修改iframe的src值,达到每次刷新页面,都可以根据当前地址栏的url,

13.9K1350

iframe框架及优缺点

iframe框架及优缺点 HTML5不再支持使用frame,关于frame与iframe的区别,可以参阅 iframe与frame的区别 基本使用 src:规定在iframe显示的文档的URL。...srcdoc:规定在iframe显示的页面的HTML内容。 align:规定如何根据周围的元素来对齐此框架,建议使用样式替代。...提交表单 可以使用iframe提交表单来避免整个页面刷新,还可以实现无刷新文件上传的操作。...实现广告展示的一个解决方案 若需要刷新iframe则只需要刷新框架内,不需要刷新整个页面 缺点 iframes阻塞页面加载,影响网页加载速度,iframe加载完毕才会触发window.onload事件...不利于SEO,搜索引擎的爬虫无法解读iframe页面。 有些小型的移动设备手机等无法完全显示框架,兼容性较差。

3.2K20

layer弹出层详解

layer如何获取界面的元素,比如我点击新增按钮,在layer框编辑提交,是如何关闭当前layer框,额,关闭layer框很简单,但是如何关闭根据界面的form表单向后台发起Ajax请求,,刷新信息...即:layer子界面如何调用界面的方法。 如果你不想使用Layui,而只是想使用layer,你可以去layer独立组件官网下载组件包。...: View Code success – 层弹出的成功回调方法 类型:Function,默认:null 当你需要在层创建完毕时即执行一些语句,可以通过该回调。...当你在页面一打开就要执行弹层时,你最好是将弹层放入ready方法: //页面一打开就执行弹层 layer.ready(function(){ layer.msg('很高兴一开场就见到你')...页面关闭自身时 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index

5.1K20

【骚操作】Spring Boot 如何上传大文件?

iframe刷新页面 在低版本的浏览器(IE)上,xhr是不支持直接上传formdata的,因此只能用form来上传文件,而form提交本身会进行页面跳转,这是因为form表单的target属性导致的...,其取值有 _self,默认值,在相同的窗口中打开响应页面 _blank,在新窗口打开 _parent,在窗口打开 _top,在最顶层的窗口打开 framename,在指定名字的iframe...把form的target属性设置为一个看不见的iframe,那么返回的数据就会被这个iframe接受,因此只有该iframe会被刷新,至于返回结果,也可以通过解析这个iframe内的文本来获取。..., 表单上传和iframe刷新页面上传,实际上都是通过form标签进行上传文件,这种方式将整个请求完全交给浏览器处理,当上传大文件时,可能会遇见请求超时的情形 通过fromData,其实际也是在xhr...在文件块的处理逻辑只需要根据文件块索引来识别即可。 此时上传时刷新页面或者关闭浏览器,再次上传相同文件时,之前已经上传成功的切片就不会再重新上传了。

1.1K40

Jquery基础(七) window.parent与window.openner区别

一、今天总结一下js几个对象的区别和用法: 1."window.location.href"、"location.href"是本页面跳转 2."...window.top.location.href"是最外层的页面跳转 二、举例说明: 如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果Djs这样写...:窗口对象 top.window:第一个窗口的对象 三、重点看看window.parent与window.openner区别 window.parent 是iframe页面调用页面对象,当我们想从...iframe内嵌的页面访问外层页面是可以直接利用window.parent获取; 例子如下: A.html 页面 ...或iframe中使用 注销整个框架返回到login.aspx:parent.window.location='Login.aspx'或者 top.window.location='Login.aspx

1.4K20

Spring Boot 如何上传大文件?骚操作~

iframe刷新页面 在低版本的浏览器(IE)上,xhr是不支持直接上传formdata的,因此只能用form来上传文件,而form提交本身会进行页面跳转,这是因为form表单的target属性导致的...,其取值有 _self,默认值,在相同的窗口中打开响应页面 _blank,在新窗口打开 _parent,在窗口打开 _top,在最顶层的窗口打开 framename,在指定名字的iframe...把form的target属性设置为一个看不见的iframe,那么返回的数据就会被这个iframe接受,因此只有该iframe会被刷新,至于返回结果,也可以通过解析这个iframe内的文本来获取。..., 表单上传和iframe刷新页面上传,实际上都是通过form标签进行上传文件,这种方式将整个请求完全交给浏览器处理,当上传大文件时,可能会遇见请求超时的情形 通过fromData,其实际也是在xhr...在文件块的处理逻辑只需要根据文件块索引来识别即可。 此时上传时刷新页面或者关闭浏览器,再次上传相同文件时,之前已经上传成功的切片就不会再重新上传了。

2.3K30

php layer弹出层更改背景,详解Layer弹出层样式

layer如何获取界面的元素,比如我点击新增按钮,在layer框编辑提交,是如何关闭当前layer框,额,关闭layer框很简单,但是如何关闭根据界面的form表单向后台发起Ajax请求,,刷新信息...即:layer子界面如何调用界面的方法。 如果你不想使用Layui,而只是想使用layer,你可以去layer独立组件官网下载组件包。...: //eg1 layer.confirm(‘纳尼?’...当你在页面一打开就要执行弹层时,你最好是将弹层放入ready方法: //页面一打开就执行弹层 layer.ready(function(){ layer.msg(‘很高兴一开场就见到你’);...页面关闭自身时 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index

3.9K20

用骚操作解决Spring Boot上传大文件的问题

iframe刷新页面 在低版本的浏览器(IE)上,xhr是不支持直接上传formdata的,因此只能用form来上传文件,而form提交本身会进行页面跳转,这是因为form表单的target属性导致的...,其取值有 _self,默认值,在相同的窗口中打开响应页面 _blank,在新窗口打开 _parent,在窗口打开 _top,在最顶层的窗口打开 framename,在指定名字的iframe...把form的target属性设置为一个看不见的iframe,那么返回的数据就会被这个iframe接受,因此只有该iframe会被刷新,至于返回结果,也可以通过解析这个iframe内的文本来获取。..., 表单上传和iframe刷新页面上传,实际上都是通过form标签进行上传文件,这种方式将整个请求完全交给浏览器处理,当上传大文件时,可能会遇见请求超时的情形 通过fromData,其实际也是在xhr...在文件块的处理逻辑只需要根据文件块索引来识别即可。 此时上传时刷新页面或者关闭浏览器,再次上传相同文件时,之前已经上传成功的切片就不会再重新上传了。

1.6K10

聊聊几种去Flash改造方案

问题归结到第二个问题,如何在前端实现a.qq.com和b.qq.com两个页面之间的通信。...但是随着ajax技术的兴起,Web 2.0时代的到来,input表单的提交改成ajax提交页面刷新的形式。...3.2去Flash上传 如何不使用Flash,上传文件,而且保证页面刷新,是我们在去Flash上传工作需要做的核心。...条件:无任何条件,支持任何浏览器 做法: 1.在页面上构建一个隐藏的iframe 2.在页面上构建一个form表单,表单包含文件表单和其它附加字段表单,target设为上述iframe的id 3.上传文件动作触发时...,调用form的submit方法 4.iframe中加载上传cgi,返回结果与窗口通信,如果iframe与cgi跨域,则参考【第二部分:跨域请求】进行处理 参考demo如下: <!

1.8K140

基于 iframe 的微前端框架 —— 擎天

图片但我尝试试用qiankun发现qiankun 的npm包常常滞后于qiankun源码,有些issue解决了但还要等待其发版;首次加载子应用页面出现抖动;子应用更新报 ChunkLoadError...那为啥不使用iframe呢?qiankun 团队也给出了原因:看这里 Why Not Iframe。总结起来就是:url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。...数据共享引擎:实现子应用间的数据共享,保证各个应用间数据统一,登录信息,用户信息等。用户在某个应用修改共享数据,会同步到数据共享引擎,再分发给其他应用,从而保证共享数据一致。...图片当用户进入页面框架拿到浏览器url,并获取到pathname,从而知道需要首先加载那个子应用。并且直接创建iframe,并直接挂到对应的dom节点中,应用和子应用异步加载。...子应用先切换路由,随后发送syncRoute消息给框架,框架使用replace方法改变浏览器地址栏,同时将应用A隐藏起来,并发送消息到子应用B。子应用B获得消息修改其本身路由。

1.5K90

前端进程间通讯的渗透之术

前端渗透的应用场景有很多,比如在《魔改npm私有仓库 》一文中就介绍了如何在框架植入私有代码,让逻辑线程和主线程激情博弈。...iframe的内容,这两种方法的优点是:子页面的开发商只需要一点点的配合就能实现,主动权掌握在页面手中。...---- 直接访问同域iframe的内存 有一种特殊情况下,不同的进程可以共享内存空间:如果页面iframe同域,问题就简单多了,也不必传输序列化数据了,页面可以直接访问并修改iframe的全局作用域...('button').click(); 同理,iframe也可以直接访问页面的全局环境: window.parent.document //document和DOM有关 ---- 异域下...iframe暴露JS和CSS接口 如果不幸页面iframe不同域,那只能通过跨域的方式传序列化数据:页面向子页面postMessage传值,子页面监听message事件。

1.7K31

聊一聊前端上传大文件的几种方式。

iframe刷新页面 在低版本的浏览器(IE)上,xhr是不支持直接上传formdata的,因此只能用form来上传文件,而form提交本身会进行页面跳转,这是因为form表单的target属性导致的...,其取值有 _self,默认值,在相同的窗口中打开响应页面 _blank,在新窗口打开 _parent,在窗口打开 _top,在最顶层的窗口打开 framename,在指定名字的iframe打开 如果需要让用户体验异步上传文件的感觉...把form的target属性设置为一个看不见的iframe,那么返回的数据就会被这个iframe接受,因此只有该iframe会被刷新,至于返回结果,也可以通过解析这个iframe内的文本来获取。..., 表单上传和iframe刷新页面上传,实际上都是通过form标签进行上传文件,这种方式将整个请求完全交给浏览器处理,当上传大文件时,可能会遇见请求超时的情形 通过fromData,其实际也是在xhr...可能发生一系列导致部分切片上传失败的情形,网络故障、页面关闭等。

2.6K20

JSBridge小科普

常用的三方库Dsbridge系列(https://github.com/wendux/DSBridge-Android)。那么,你知道JSBridge到底是如何在两端进行通信的吗?...于是,Native WebView控件的H5页面,可以通过JS代码请求这个通用Schema协议。 比如,通过添加一个不可见的iframe,设置其src属性,发送一个URI请求。...一旦系统捕获到注册表的Schema URI,就会通过此URI地址执行该Schema协议定义的Native操作,执行一段Native代码或者打开APP的某个页面打开摄像头,唤起图片预览功能,跳转APP.../** * 添加javascriptInterface * 第一个参数:这里需要一个与js映射的java对象 * 第二个参数:该java对象被映射为js对象在js里面的对象名,在js要调用该对象的方法就是通过这个来调用...Android 4.4 以前,通过 loadUrl 方法,执行一段 JS 代码来实现(缺点是效率低,无法获得返回结果,且调用的时候会刷新 WebView): /** * js声明全局函数 */ <

2.8K30
领券