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

关闭Iframe时重新加载父页面- Fancybox

关闭Iframe时重新加载父页面是指在使用Fancybox插件时,当关闭弹出的Iframe窗口时,重新加载包含该Iframe的父页面。

Fancybox是一款流行的轻量级的jQuery插件,用于创建漂亮的弹出窗口效果。它可以用于显示图片、视频、网页等内容。当使用Fancybox插件打开一个Iframe窗口时,有时需要在关闭该窗口时重新加载包含该Iframe的父页面,以便更新父页面的内容或执行其他操作。

为了实现关闭Iframe时重新加载父页面的功能,可以使用Fancybox提供的回调函数和事件来实现。具体步骤如下:

  1. 在父页面中引入Fancybox插件的相关文件和样式。
  2. 在父页面中创建一个链接或按钮,用于触发打开Iframe窗口的操作。
  3. 使用JavaScript代码初始化Fancybox插件,并设置相关参数。例如:
代码语言:txt
复制
$(document).ready(function() {
  $(".fancybox").fancybox({
    // 设置其他参数
    afterClose: function() {
      // 在关闭窗口后执行的回调函数
      location.reload(); // 重新加载父页面
    }
  });
});
  1. 在父页面中使用指定的HTML元素来包裹需要打开的Iframe内容,并添加相应的类名或属性,以便Fancybox识别并应用样式。例如:
代码语言:txt
复制
<a class="fancybox" href="iframe.html">打开Iframe窗口</a>
  1. 在父页面中添加一个用于显示Iframe内容的容器元素。例如:
代码语言:txt
复制
<div id="iframe-container"></div>
  1. 在Iframe页面中,可以通过JavaScript代码来关闭Fancybox窗口。例如:
代码语言:txt
复制
parent.$.fancybox.close();

通过以上步骤,当点击父页面中的链接或按钮打开Iframe窗口时,关闭该窗口时会触发afterClose回调函数,从而重新加载包含该Iframe的父页面。

推荐的腾讯云相关产品:腾讯云CDN(内容分发网络),详情请参考腾讯云CDN产品介绍:https://cloud.tencent.com/product/cdn

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

相关·内容

iframe关闭父页面(iframe嵌套https页面)

iframe是html标签,具有一般标签的属性: width iframe的高度 height iframe的宽度 src iframe里面加载的页面url name 可以通过window.frames...在主页面中通过iframe标签可以引入其他子页面 <!...对象 2、获取父页面 子页面可以访问、修改同一个域名的父页面的方法和属性 window.parent/parent 获取当前页面的父页面-iframe所在的页面 parent.window 获取父页面的...window属性 parent.document 获取父页面的document属性 window.top 获取打开该页面的父页面,如果当前页面没有被嵌套到iframe中,window.topwindow...window.self=window 安全问题-禁止iframe嵌套网页 //当页面被非同域名iframe嵌套时:嵌套页面网址改变成本页面网址 if (window.top !

6.9K10

jQuery 图片播放插件 FancyBox 和其 WordPress 插件

FancyBox 的特性 支持图片,HTML 元素,Flash 动画,Iframe 以及 AJAX 支持。 可以自定义播放器和 CSS 样式。 可以以组的形式进行轮转播放。...如果加载了鼠标滚动插件(mouse wheel plugin),FancyBox 还支持通过鼠标滚动事件来翻阅图片。 通过 easing plugin,可以实现更花哨的轮转效果。...这个插件没有配置页面,没有选项,只需激活即可,这也是我推荐的插件方式。 下载:Easy FancyBox。 2....Fancy Gallery Fancy Gallery 整合 FancyBox 到你的 WordPress 博客中,同样,所有指向图片的链接都会自动使用 FancyBox 的方式弹出页面的上面,如果你使用...,放大速度,动画效果,关闭按钮的位置,覆盖层的颜色,透明度,还有如果去归类一组相册的选项等等。

2.4K20
  • bootstrap3-dialog打开嵌套iframe窗口

    ,在关闭事件后传递消息通知父级页面关闭dialog window.addEventListener('message', receiveMessage, false); function...,这里把div点击事件重新注册,把dialog的关闭后事件置空 dialogInstance.getModalHeader().find("[class='bootstrap-dialog-close-button...,height/weight就是高/宽,callback就是dialog关闭时的回调函数,比如新增数据时关闭新增页面调用回调函数刷新列表页,其中对页面的嵌套就是通过对dialog中的内容加载嵌套一个iframe...dialog又打开就要关闭,我们不可能只通过x号关闭页面,我们还需要点击关闭,确定这些按钮来关闭页面,这样我们就需要在opener和dialog建立起联系,这里采用的是给页面的message事件注册监听...,收到指定的消息,则关闭dialog,能这样做的原因是dialog模态窗口实质上就是在原页面基础上加上了一个div和遮罩层,其实还是属于同一个页面的,所以相互发送message可以收到,所以关闭dialog

    45420

    layer实现关闭弹出层刷新父界面功能详解

    方案一: 在layer弹出层中调用父界面重新加载函数 1 2 3 window.parent.location.reload(); varindex = parent.layer.getFrameIndex...父窗口打开layer弹出框时,添加end回调 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 functionopenLayer() {   //iframe层     parent.layer.open...方案二,不管怎样都会刷新页面,实际上无端的增加了服务器的处理压力。 方案二:可以解决子页面处理后的结果发送给子页面的父页面的问题。...对于layer.js出现回调关闭父类的弹出层时,之前的表单的submit失效的问题: 如何解决:网上有很多,有的是转为ajax的请求,在数据传输完再关闭父类的弹出层: 下面是关闭父弹出层的办法: 1 2...未经允许不得转载:肥猫博客 » layer实现关闭弹出层刷新父界面功能详解

    4.7K60

    广告等第三方应用嵌入到web页面方案 之 使用js片段

    ,就打开新的文档流并写入,原来的文档流会被清空,已渲染好的页面就会被清除,浏览器将重新构建DOM并渲染页面.所以使用这种方案, 就一必须是同步执行嵌入的这段js代码, 作为第三方脚本引入,阻塞性的脚本会阻止主页面的渲染...,如果js文件加载迟缓,甚至不可用的, 会给主页面造成严重的性能问题, 所有不建议使用.  ...由浏览器异步处理, 所以此处使用document.write()并不会阻止父页面的加载 优点:    1.完全独立的DOM环境,不会继承父页面的样式   2完全独立的window,避免和主页面其他脚本冲突...1.需要在iframe外部呈现内容, 场景: 第三方应用中需要弹出对话框时,如果iframe不是覆盖整个页面的, 就无法正常展示对话框    2.一个页面引入很多个iframe嵌入页面, 同一个页面引入许多个...iframe时, 会带来主页面很大的性能开销, 对于只是渲染一两次情况, 这种性能消耗可以忽略不计   3.需要继承父页面的基础样式, 有些时候,希望第三方应用继承父页面的基础样式, 来和主页面的样式风格保持一致

    3.4K111

    nodeIntegrationInSubFrames | Electron 安全

    在之前的一些版本中,似乎子窗口会继承父窗口的一些配置,但后来主要是为了生命周期等,简单来说,我把父窗口关了,子窗口也会被关闭或其他设置 该参数要在父窗口初始化是配置,而不是子窗口 0x03 测试 iframe...,子窗口并不会跟着关闭 测试一下nodeIntegrationInSubFrames: true 时子窗口是否能够读取父窗口的 Preload 中的内容 获取失败,看起来官方文档中描述的 child window...30.0.0 新添加的功能,用来替代原本的 BrowserViews 1. webview 标签 对于 webview 标签,在 Electron >= 5.0 版本后,默认不允许,使用的话必须在创建父窗口时显式地设置...iframe 一致 4. embed 1) embed 服务器 embed 远程加载页面内容 1.html 2) 测试执行 Node.js 开启 nodeIntegration,关闭上下文隔离进行测试...一致 3) 测试预加载脚本 修改 embed 服务器内容,获取并控制台输出预加载脚本暴露给渲染进程的值 设置 nodeIntegrationInSubFrames: true 成功获取到预加载脚本暴露给渲染页面的内容

    32310

    干货 | 长连接websocketSSE等主流服务器推送技术比较

    缺点: 1、页面会出现‘假死’ setTimeout在等到每次EventLoop时,都要判断是否到指定时间,直到时间到再执行函数,一旦遇到页面有大量任务或者返回时间特别耗时,页面就会出现‘假死’,无法响应用户行为...1.3 iframe流: iframe流方式是在页面中插入一个隐藏的iframe,利用其src属性在服务器和客户端之间创建一条长连接,服务器向iframe传输数据(通常是HTML,内有负责插入信息的javascript...前端实现步骤: 1、Iframe设置为不显示。 2、src设为请求的数据地址。 3、定义个父级函数用户让iframe子页面调用传数据给父页面。...4、定义onload事件,服务器timeout后再次重新加载iframe。 后端输出内容: 当有新消息时服务端会向iframe中输入一段js代码....服务端连续不断的发送,客户端不会关闭连接,如果连接断开,浏览器会尝试重新连接。如果连接被关闭,客户端可以被告知使用 HTTP 204 无内容响应代码停止重新连接。

    3.6K80

    Layui弹出层关闭

    parent.layer.close(index); //该方式只能是弹窗类型为2时,即为iframe层时可以使用 layer.closeAll();//疯狂模式,关闭所有层   layer.closeAll...('dialog'); //关闭信息框   layer.closeAll('page');//关闭所有页面层   layer.closeAll('iframe');//关闭所有的iframe层   ...layer.closeAll('loading');//关闭加载层   layer.closeAll('tips');//关闭所有的tips层 弹窗关闭后刷新页面 窗口关闭后表格刷新 table.reload...('id') 页面全体刷新 window.parent.location.reload(); 刷新父页面table(连同查询条件): parent.layui.table.reload('test...'); 其中test为父页面table的id值 //引自:https://blog.csdn.net/Third_Week/article/details/95478905 发布者:全栈程序员栈长,转载请注明出处

    5K20

    干货 | 长连接websocketSSE等主流服务器推送技术比较

    缺点: 1、页面会出现‘假死’ setTimeout在等到每次EventLoop时,都要判断是否到指定时间,直到时间到再执行函数,一旦遇到页面有大量任务或者返回时间特别耗时,页面就会出现‘假死’,无法响应用户行为...1.3 iframe流: iframe流方式是在页面中插入一个隐藏的iframe,利用其src属性在服务器和客户端之间创建一条长连接,服务器向iframe传输数据(通常是HTML,内有负责插入信息的javascript...前端实现步骤: 1、Iframe设置为不显示。 2、src设为请求的数据地址。 3、定义个父级函数用户让iframe子页面调用传数据给父页面。...4、定义onload事件,服务器timeout后再次重新加载iframe。 后端输出内容: 当有新消息时服务端会向iframe中输入一段js代码....服务端连续不断的发送,客户端不会关闭连接,如果连接断开,浏览器会尝试重新连接。如果连接被关闭,客户端可以被告知使用 HTTP 204 无内容响应代码停止重新连接。

    3.4K30

    layer弹出层详解

    layer如何获取父界面的元素,比如我点击新增按钮,在layer框编辑后提交,是如何关闭当前layer框,额,关闭layer框很简单,但是如何关闭后根据父界面的form表单向后台发起Ajax请求,,刷新信息...当你在页面一打开就要执行弹层时,你最好是将弹层放入ready方法中,如: //页面一打开就执行弹层 layer.ready(function(){ layer.msg('很高兴一开场就见到你')...,直接获取layer.index即可 layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的 //当你在iframe页面关闭自身时...再执行关闭 layer.getChildFrame(selector, index) – 获取iframe页的DOM 当你试图在当前页获取iframe页的DOM元素时,你可以用此方法。...(windowName) – 获取特定iframe层的索引 此方法一般用于在iframe页关闭自身时用到。

    5.2K20

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

    layer如何获取父界面的元素,比如我点击新增按钮,在layer框编辑后提交,是如何关闭当前layer框,额,关闭layer框很简单,但是如何关闭后根据父界面的form表单向后台发起Ajax请求,,刷新信息...layer.ready(callback) – 初始化就绪 由于我们的layer内置了轻量级加载器,所以你根本不需要单独引入css等文件。但是加载总是需要过程的。...当你在页面一打开就要执行弹层时,你最好是将弹层放入ready方法中,如: //页面一打开就执行弹层 layer.ready(function(){ layer.msg(‘很高兴一开场就见到你’);...,直接获取layer.index即可 layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的 //当你在iframe页面关闭自身时 var...iframe页关闭自身时用到。

    4K20

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

    iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。...(3)子应用集合层该层为系统提前设置好的子应用集合,子应用由全屏iframe加载,同一时刻仅有一个子应用处于可视状态,其他子应用隐藏。当需要应用切换时,隐藏当前应用,显示需要展示的应用,瞬间切换。...图片当用户进入页面后,父框架拿到浏览器url,并获取到pathname,从而知道需要首先加载那个子应用。并且直接创建iframe,并直接挂到对应的dom节点中,父应用和子应用异步加载。...图片子应用通过类vuex似的 mapGlobalState 方法可以获取父应用store中数据,同时该数据为响应式,数据变更可触发UI重新渲染。...图片六、总结擎天基于全屏Iframe与搭建公共组件等方式,解决了iframe UI不同步的难题,并充分发挥了iframe作为页面容器的优势,实现了父子应用异步加载、子应用瞬间切换的能力,从而达到单应用项目的体验

    1.6K90

    5行代码为你的博客引入fancybox

    Responsive, touch-enabled and customizable 引入目的&感谢 引入fancybox目的:解决移动端访问博客文章时,图片无法放大影响阅读体验问题。...感谢:超级感谢 张帆 反馈手机端访问文章时图片无法放大,影响阅读的问题,同时推荐了 fancybox 这个组件来解决这个问题。...js 实现思路与方式非常简单:动态为所有 img 标签添加一个父元素即可,有效代码就 5 行 // 集成fancybox, 为所有img元素添加父元素 $("img").each(function (..."href", $(this).attr("src")); $(this).wrap(element); }); 下面是手机上访问文章 Mysql thread 与 OS thread 时放大其中一张图片的效果...[7e2b07a8078b45a0a698fd3c2e7f4386.png] 我的博客使用 Editor.md 作为markdown编辑器,在展示页面时,当editor.md渲染完html页面后,再使用上述代码动态处理

    98640

    网页内容加速黑科技趣谈

    但在同一个 tab 下浏览页面时,他们用 JavaScript 重新实现了导航(navigation)功能,类似下面这样: // …一堆重新实现浏览器导航功能代码… const response =...在页面之内切换内容可能确实有些好处,特别是存在大量脚本的情况下,无需重新执行全部脚本即可更新内容。但我们能否在不放弃流的情况下完成这样的工作呢?...是写到 iframe 中的,但它却出现在了父级的 document 中!这是因为解析器维护了一个敞开元素栈(stack of open elements),新创建的元素会被压入栈中。...此外,这种技术处理起 HTML 来,要比 innerHTML 更接近标准的页面加载解析器。...使用 iframe 进行流式渲染,页面加载速度提高了 1.5 s。头像也提前半秒钟加载完成 —— 流式渲染意味着浏览器可以更早发现它们,并与内容一起并行下载。

    2.9K10

    美团前端常见面试题整理_2023-02-23

    1)父窗口:(domain.com/a.html) iframe id="iframe" src="http://child.domain.com/b.html">iframe> ...= document.createElement('iframe'); // 加载跨域页面 iframe.src = url; // onload事件会触发2次,第1次加载跨域页...懒加载也叫延迟加载,指的是在长网页中延迟加载图片的时机,当用户需要访问时,再去加载,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力。...重新渲染需要重复之前的第四步(重新生成布局)+第五步(重新绘制)或者只有第五个步(重新绘制) 在构建 CSSOM 树时,会阻塞渲染,直至 CSSOM树构建完成。...js 脚本 图片 怎么判断页面是否加载完成 Load 事件触发代表页面中的 DOM,CSS,JS,图片已经全部加载完毕。

    1.9K10

    前端基础知识整理汇总(上)

    load —— 浏览器已经加载了所有的资源(图像,样式表等)。 beforeunload —— 当用户即将离开当前页面(刷新或关闭)时触发。...会产生函数执行上下文环境,函数调用完成后,它的执行上下文环境以及其中的数据都会被销毁,重新回到全局执行环境,网页关闭后全局执行环境也会销毁。...栗子: 在父页面 http://xxx.com/a.html 中设置document.domain iframe id = "iframe" src="http://xxx.com/b.html" onload...在父页面监听iframe的onload事件,获取子页面数据: /* a.com/app.html */ var iframe =...4.在子实例中可向父实例传参。 缺点: 1.能继承父类构造函数的属性。 2.无法实现构造函数的复用。(每次用每次都要重新调用) 3.每个新实例都有父类构造函数的副本,臃肿。

    1.3K10

    Web 嵌入 | Electron 安全

    allow-top-navigation比较重要,它用于控制嵌入在 iframe> 中的页面是否有权限导航其顶层浏览上下文(即改变父窗口或顶级窗口的location)。..., 本地文件创建的主窗口与 加载http(s)页面的 iframe 是不同源的 本地文件创建的主窗口与加载本地文件的 iframe 是同源的 3. iframe 执行 Node.js 的情况 从上面的测试来看...通过上面的测试,这件事也比较清晰了,如果 iframe 的地址与渲染页面的地址不同源的话,那么 iframe 的上下文就是一个独立的上下文 如果 iframe 的地址与渲染页面的地址同源,并且关闭了上下文隔离...: true 如果 iframe 的地址与渲染页面的地址同源,并且关闭了上下文隔离,则 iframe 可以获取到渲染页面和 Preload 的上下文 如果 iframe 的地址与渲染页面的地址同源,但是关闭了上下文隔离...对应 1) src 表示可见网址的 string 写入此属性将启动顶级跳转 更改 src 的值将重新加载当前页面

    98610
    领券