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

为什么要从iframe关闭父窗口,我们需要调用window.parent.window.close两次?

从iframe关闭父窗口的需求是因为在网页开发中,有时候我们需要在iframe中打开一个新的页面,并在新页面中完成一些操作后关闭父窗口。这种需求通常出现在一些特定的场景中,比如在某些网页应用中,当用户完成某个任务后,需要关闭整个应用。

在这种情况下,我们需要调用window.parent.window.close两次的原因是因为浏览器的安全策略限制了对父窗口的直接关闭操作。为了避免恶意网站滥用这个功能,浏览器要求在关闭父窗口之前必须经过用户的确认。因此,我们需要通过两次调用来实现关闭父窗口的操作。

第一次调用window.parent.window.close是为了关闭当前的iframe窗口,这是一个普通的关闭操作,不会触发浏览器的安全提示。

第二次调用window.parent.window.close是为了关闭父窗口,这时浏览器会弹出一个确认框,询问用户是否允许关闭窗口。用户确认后,父窗口才会被关闭。

需要注意的是,这种关闭父窗口的方式并不是所有浏览器都支持,而且在某些浏览器中可能会被视为不安全的操作。因此,在实际开发中,我们应该谨慎使用这种方式,并且最好提供其他的替代方案来实现相同的功能。

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

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

相关·内容

前端跨了个域

我们谈论前端跨域时,我们到底在说什么?...location.hash 一个页面和从属于它的 iframe 之间可以互相读取和修改 URL,但还是有一定的前提:窗口对子窗口进行 url 的读写时,随意;子窗口窗口的 url 进行读写时,受到同源策略的限制...所以在这种情况下,子窗口需要借助一个“代理窗口”去修改窗口的 url。 通信的交互过程如上。 接下来再讨论为什么 hash 可以实现传递数据的需求。...事件拿到对应的数据 postMessage 这个方法就比较简洁明了:窗口和子窗口都可以作为数据的发送方和接收方,且不需要考虑是否同源。...还是用上面的栗子,比如现在需要从窗口向子窗口发送数据: // A.js const iframe = document.querySelector('#iframe'); const targetOrigin

64620

【Vue】基于Vue封装的无需页面声明的弹出层

会提供以下一些常用功能: 引用vue工程版本的js时需要在Vue初始化时进行变量声明,即 var app1 = new Vue({}) 调用方法的形式为app1....$fastdialog.functionname 引用master分支下的直接调用方法即可 1.打开一个html页面 OpenDialog("111", "打开窗口", "newpage1.html",...) id:dialog标识,title:dialog的head部分的文字,url:打开的页面地址,height:打开页面的高度,width:打开页面的宽度,callback:关闭打开页面后的级页面调用的回调函数...,params:级页面给打开的子页面传递的参数,screenunit:打开页面宽高的单位 注:OpenDialog方法是在本级页面打开窗口,该组件同时提供在顶级窗口打开全局页面,为OpenTopDialog...["fastdialog_params"] = params;实现,具体逻辑可以查看源码看下,需要注意的是dialog还提供右上角的x关闭页面,关闭时也需要同步维护dialoglist数组 4.使用Vue

25130
  • bootstrap3-dialog打开嵌套iframe窗口

    ,在关闭事件后传递消息通知级页面关闭dialog window.addEventListener('message', receiveMessage, false); function...,其中对页面的嵌套就是通过对dialog中的内容加载嵌套一个iframe实现,但是这样整体样式会有些问题,所以我们通过对modalbody,modaldialog的一些样式进行了调整,特别注意,需要调用...dialog又打开就要关闭我们不可能只通过x号关闭页面,我们需要点击关闭,确定这些按钮来关闭页面,这样我们需要在opener和dialog建立起联系,这里采用的是给页面的message事件注册监听...中打开窗口,遮罩层和dialog都会以iframe为基准,但有时候这样会显的窗口太小使用不方便,所以我们这里要再加一种方法,打开全局dialog,就是如果在iframe中打开,dialog要显示在iframe...的顶级窗口中,这就需要我们对源码小小的改造下 //顶部打开移动dialog所属窗体 if(this.options.istop){ this.getModal

    38720

    nodeIntegrationInSubFrames | Electron 安全

    我们只用到了一个窗口我们一直称之为主窗口,但从逻辑角度来说,没有子窗口的存在,也就没有什么主窗口之说 大家有些时候在使用应用程序的时候,点击某个功能会跳出来一个新的窗口,这个就叫做子窗口 举个例子,我们在电脑版微信中查看公众号文章时...问题来了,为什么要设置父子窗口呢?...在之前的一些版本中,似乎子窗口会继承窗口的一些配置,但后来主要是为了生命周期等,简单来说,我把窗口关了,子窗口也会被关闭或其他设置 该参数要在窗口初始化是配置,而不是子窗口 0x03 测试 iframe...Node.js 这样以来, nodeIntegrationInSubFrames 对子窗口 Node.js 的执行就没有影响了呀,而且经过我的测试,在生命周期方面,关闭窗口,子窗口并不会跟着关闭 测试一下...并不相关,主要与窗口安全配置以及 webview 标签本身配置有关系 2.

    18410

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

    窗口打开layer弹出框时,添加end回调 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 functionopenLayer() {   //iframe层     parent.layer.open...end:function() {         location.reload();       } }); layer弹出框处理完成之后,就不需要调用其他刷新操作函数了,直接关闭就行了 1 2 varindex...,应该不触发刷新操作,只有当弹出框的处理逻辑执行成功后,调用函数关闭弹出框才触发界面刷新操作,基于这个逻辑,应该选择方案一。...(function() {   parent.layer.close(index);// 关闭layer },500); 我还需要关闭窗口后再打开一个窗口,则怎么解决,后面发现layer.js留有一个好的方式...,那就是调用窗口的方法,这个不受子窗口的影响,通过:parent.类方法名(参数)这样就可以了,在窗口中再调用layer.js的弹出就好了。

    4.6K60

    如何使用 JavaScript 检测用户是否启用三方 Cookie ?

    虽然这听起来挺奇怪的,我们好像无法直接通过 iFrame 调用页面的功能。...但是我们可以使用 Message Event 来进行父子应用之间的通信,通过这个我们可以基于 URL 向其他浏览器发送消息,在我们现在这种情况下,我们可以从 iFrame 向可能在不同域上的应用发送消息...首先,我们iFrame 内添加一个立即执行函数。在这个函数中,我们添加一个消息事件监听器,这个监听器会在从父级应用程序调用时触发。...然后,我们通过 parent.postMessage() 方法向应用发送一条消息;在 iFrame 中,parent 是一个隐含的对象。 <!...return let result = checkCookiesEnable(); // 将结果通过消息事件发送到窗口

    37610

    三种切换

    首先这样一个弹出框,这样一个iframe出来呢,是因为你的一个操作出来的,所以你可以调用我们的各种操作进入到这个页面之后,iframe就出来了。...driver.switch_to.default_content() 想在这个iframe当中再切换到下一级,一层一层切进去就可以了,不能够跳层,如果你在这个html页面中还有iframe,那就切换两次...能退到iframe的上一级。 driver.switch_to.parent_frame() parent_frame就是跳到它的级。...send_keys() 输入操作 click() 点击操作 在写代码,调试代码的阶段,不需要把quit加上,如果运行的过程中有一个地方报错了,不要着急把窗口关闭,先看看报错信息是什么,然后直接在运行结果页面调试的...所以,我们即使确认alert弹框出现了,我们自己想要对它进行下一步处理的时候,还是要driver.switch_to.alert自己再切一次,不然就不好处理了。

    1.1K10

    JavaScript学习笔记+常用js用法、范例(二)

    ").innerHTML = ""; // 窗口调用窗口的函数 win.testFun(); // 子窗口控制窗口 window.opener.window.document.getElementById...("bnt").value = "重新查看"; // 子窗口调用窗口的函数 window.opener.testfun(); 注意:窗口刚打开子窗口时马上对它进行赋值或者调用其函数等操作可能会失败,...因为子窗口未完全加载 需要这样做时,最好在子窗口写加载的js,再调用窗口; 以免操作失败。...页面:在跨域访问限制。 页面: 顶层页面:。 页面: 顶层页`适用于所有浏览器 4) 获得 iframe 的内容。存在跨域访问限制。...的特性帮我们精简了代码,同时也降低了代码的可读性。 这就需要我们自己来权衡了。 // 不一定非得用这些精简写法,但得读得懂,因为很多框架用上了这类写法。

    2.1K20

    vivo 悟空活动中台 - 微组件状态管理(下)

    5、勇于探索,Vuex的跨iframe的数据管理 我们希望整体的组件状态管理方式回归在一种方式上,既然我们都使用了 Vuex, 所以我们希望探索以vuex为核心的跨iframe的数据管理方案。...假如代码如下,窗口暴露store对象给子iframe访问,在子窗口中获取数据,能保持数据的响应式嘛?...那为什么呢?为什么 iframe 会中断 vuex 的响应式数据呢?这个时候,我们需要回归原点,去理解 Vue 响应式数据的原理。...因为 iframe 的关系窗口的Dep.target获取值为null,导致的dep对象收集不到子iframe中的watcher,阻断了响应式,关键代码如下图: 8、守正出奇 我们能不能将中断的父子窗口的依赖收集...8.1 抽象parent-store-mixin 通过 parent-store-mixin 将窗口的store挂载在子 iframe窗口内vue对象的$pstore属性上,方便 在vue组件内获取窗口

    1.7K40

    postMessage 还能这样玩

    接下来,阿宝哥将介绍消息通信的另外一种场景,即页面与 iframe 加载的子页面之间,如何进行消息通信。 为什么会突然写这个话题呢?...的iframe子页面地址 name: 'my-iframe-name' // 用于设置iframe元素的name属性 }); 在以上代码中,我们通过调用 Postmate 构造函数来创建 postmate...然而在一些场景下,我们需要获取方法调用的返回值,接下来我们来看一下 ParentAPI 是如何实现这个功能。 3.3.2 调用子页面模型对象上的方法并获取返回值 ?...若需要获取调用后的返回值,我们需要调用 ParentAPI 对象上提供的 get 方法: export class ParentAPI { get(property) { return new...四、如何断开连接 当页面与子页面完成消息通信之后,我们需要断开连接。这时我们可以调用 ParentAPI 对象上的 destroy 方法来断开连接。

    2K31

    腾讯前端一面常考面试题_2023-03-13

    服务器端调用HTTP接口只是使用HTTP协议,不需要同源策略,也就不存在跨域问题。...1)窗口:(domain.com/a.html)...localStorage:始终有效,窗口或浏览器关闭也一直保存,本地存储,因此用作持久数据; cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭 4.作用域不同...sessionStorage:不在不同的浏览器窗口中共享,即使是同一个页面; localstorage:在所有同源窗口中都是共享的;也就是说只要浏览器不关闭,数据仍然存在 cookie: 也是在所有同源窗口中都是共享的...:事件按DOM事件流的顺序执行事件处理程序:级捕获子级捕获子级冒泡级冒泡且当事件处于目标阶段时,事件调用顺序决定于绑定事件的书写顺序,按上面的例子为,先调用冒泡阶段的事件处理程序,再调用捕获阶段的事件处理程序

    1.1K40

    不同页面通信与跨域

    下面例子,都是一个html内嵌iframe,当然你直接打开iframe那个文件,没什么意义的 2.1 利用hash变化传递信息实现父子窗口通信(能跨域) 窗口:1.html html: <iframe...' } 子窗口:2.html window.onhashchange = function() { console.log(window.location.hash) } 我们打开窗口,发现子窗口的...既然能跨域,我们直接双击打开1.html,发现还是可以,这个例子双击打开和服务器打开都能达到目的 2.2 调用子页面的js或者反过来调用 调子:还是基于前面的条件 var i = document.querySelector...,只能服务器打开 2.3 window.name (能跨域) 类似于vue、react的prop父子传值,只要在窗口设置iframe标签的name,在子窗口就可以读到。...窗口:1.html 子窗口:2.html console.log

    1.8K10

    vivo 商品中台的可视化微前端实践

    三、可视化技术原理 可视化整体技术原理图如下: [图片] 从上图可以获得以下信息: 子窗口iframe 展示; 子窗口用 vuex 做状态管理; 子窗口窗口通过共享状态 ( vue store...看到这,小伙伴可能会有以下疑问: iframe窗口的数据通信是通过 postMessage 完成的,这里为什么不使用 postMessage 呢?...有以下缺点: 窗口含有大量逻辑:窗口需要将 vuex 的数据进行处理,然后通过 postMessage 进行传输; 数据通信方式不纯粹:vuex 和 postMessage 组合在一起,互相转换,使数据通信更加复杂和难以控制...它包含以下关键内容: 将 iframe 当成一个 dom 节点; 窗口渲染子窗口iframe )暴露的组件; 父子窗口共享 vue store; uni-render 的技术原理图如下: [图片]...而我们通过 uni-render ,让窗口iframe窗口的数据通信不再需要 postMessage ,同时只使用 vue 生态中的 vuex 做数据通信。

    1.1K50

    玩转iframe3. 非同域的两个tab页面通信4.MessageChannel

    下面例子,都是一个html内嵌iframe,当然你直接打开iframe那个文件,没什么意义的 2.1 利用hash变化传递信息实现父子窗口通信(能跨域) 窗口:1.html html: <iframe...' } 复制代码 子窗口:2.html window.onhashchange = function() { console.log(window.location.hash) } 复制代码 我们打开窗口...既然能跨域,我们直接双击打开1.html,发现还是可以,这个例子双击打开和服务器打开都能达到目的 2.2 调用子页面的js或者反过来调用 调子:还是基于前面的条件 var i = document.querySelector...,只能服务器打开 2.3 window.name (能跨域) 类似于vue、react的prop父子传值,只要在窗口设置iframe标签的name,在子窗口就可以读到。...窗口:1.html 复制代码 子窗口:2.html console.log

    4.3K20

    一文搞懂Electron的四种视图容器和它们之间的IPC通信机制

    因为Electron封装的跨进程通信对象ipcMain和ipcRenderer都是基于nodejs环境的api,而出于安全性考虑,通常需要在生产环境中关闭渲染进程的node权限(设置窗口的nodeIntegration...,这意味着我们可以直接建立A窗口/主进程和B窗口的worker或iframe的通信链路。...当它需要和素主页面交换消息的时候,同样需要使用窗口窗口的方式,交换webContentsid或者MessagePort。这是它和传统内嵌页面iframe的最大的区别。...event.ports[0] const iframe = document.querySelector("iframe"); // 注意,如果窗口iframe跨域了,第二个参数要设成* iframe.contentWindow.postMessage...iframe方案就无法做到这一点。还有一个优势,注册的过程可以在preload脚本里执行,而preload脚本由业务维护。

    9.4K75

    layui弹窗间的传值(layui弹出层传值)(窗口传值)

    主要有两部分 1、从主窗口传值到弹出层 2、从弹出层传值到主窗口 3、通过session互传 4、通过调用窗口的函数从而获取到窗口的值(相反也是可以的) 1、从主窗口传值到弹出层 首先时js...('roleid'); 删除session中保存指定的值 sessionStorage.removeItem('roleid'); 删除全部 sessionStorage.clear(); 4、通过调用窗口的函数从而获取到窗口的值...= window.parent.getrowselect(); console.log(rowselect);//这里可以打印一下获取到值没有 5、假如是子窗口传值给窗口 窗口js: function...需要用到top.layer.open或者parent.layer.open 这时通过 var iframeWin = window[layero.find('iframe')[0]['name']];...//得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method(); 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/131259.html

    6.6K20

    layer弹出层详解

    layer如何获取界面的元素,比如我点击新增按钮,在layer框编辑后提交,是如何关闭当前layer框,额,关闭layer框很简单,但是如何关闭后根据界面的form表单向后台发起Ajax请求,,刷新信息...即:layer子界面如何调用界面的方法。 如果你不想使用Layui,而只是想使用layer,你可以去layer独立组件官网下载组件包。...layer.ready(callback) – 初始化就绪 由于我们的layer内置了轻量级加载器,所以你根本不需要单独引入css等文件。但是加载总是需要过程的。...= layer.tips(); //正如你看到的,每一种弹层调用方式,都会返回一个index layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close...')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method(); 7 console.log(body.html())

    5.1K20
    领券