首页
学习
活动
专区
圈层
工具
发布

实现iframe父窗体与子窗体的通信

本文主要会介绍如何基于MessengerJS,实现iframe父窗体与子窗体间的通信,传递数据信息。同时本文会提供一个可运行的实例代码,实现在父窗体中,获取到来自子窗体的数据的效果。...0.背景介绍 (1)需要在当前的前端项目中,使用iframe嵌套别的站点页面。 (2)当子窗体触发了一个事件后,要给父窗体传一个跳转地址的url。...1.采用方案 1.1 MessengerJS方案 可以采用MessengerJS方案,该方案可以实现父窗体与iframe之间的通信、多个iframe之间的通信。...对象的名字: // 父窗口中 - 添加消息对象, 明确告诉父窗口iframe的window引用与名字 messenger.addTarget(iframe1.contentWindow, 'iframe1...的名字和消息,例如父窗体要给子窗体发消息:  // 父窗口中 - 向单个iframe发消息  messenger.targets['iframe1'].send(msg1);  messenger.targets

10.2K771
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何检测本页中的iframe是否“加载”完成

    这其实是上一篇"iframe框架取值兼容ie/firefox/chrome的写法"的扩展应用: 应用场景:iframe个人感觉最独特的应用之一就是配合P3P协议可以实现跨域写入cookie(好象除此之外...,还没找到更有效的办法),但是有时候我们不知道这个iframe页面是否执行完毕,有没有办法判断iframe里的页面是否load完成了呢?...document.getElementById("txt").value="ok";         } index.html: 检测本页中的所有...;     } else{         setValue();     } } 检测本页中的iframe是否加载完成 iframe... id="result" style="margin:10px;"> 准备就绪 值得注意的是:本文中的示例是放在按钮click事件中检测的,如果打算页面一打开就开始检测

    4.3K50

    JS获取节点的兄弟,父级,子级元素的方法

    2015-08-18 03:48:27 下面介绍JQUERY的父,子,兄弟节点查找方法 jQuery.parent(expr)  找父亲节点,可以传入expr进行过滤,比如$("span").parent...()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children...(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents(),返回下面的所有内容,包括节点和文本。...(),返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQuery.nextAll(),返回所有之后的兄弟节点 jQuery.siblings(),返回兄弟姐妹节点...jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从元素开始找

    11K10

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

    在访问到内部某个页面后,希望父窗体的地址栏跟随子窗体内部src,同时更新父窗体的地址栏,再刷新页面可以保持在当前访问的页面,同时可以分享链接。...内部在window.location的hash值变化后,获取子窗体的href值,再对父窗体的地址栏做修改。...,是可以达到更新父窗体地址栏src的效果,但会在修改地址栏的同时刷新页面。...这样每次iframe内部的src发生变化后,都会相应修改父窗体的地址栏,但又不会去刷新当前页面,效果上看起来就像是在自己的页面中操作,感受不到跨站点的问题。...每次刷新页面,在页面初始化时,就根据当前父窗体的地址栏中的url去得到属于运维平台的location.search值,用这个值修改iframe的src值,达到每次刷新页面,都可以根据当前地址栏的url,

    15.1K1350

    准确获取事件源的任意父级元素(事件委托)

    事件委托的特殊用法 问题回顾 当我们想给一个列表中的每个列表项添加相同的事件时,我相信最先想到的方法一定是事件委托,通过将事件监听器设置在其父节点上,利用事件冒泡的原理实现想要的操作,这样只进行了一次的...需要实现的功能是,点击这个盒子区域,输出对应的li对应的id,下面是这个li对应的代码片段,很显然在li内部存在着大量的子元素,我们需要通过给li的父元素ul绑定事件,从而实现事件委托,那么我们该如何确定我们点击的元素属于哪一个...li了,从而导致我们获取不到id无从下手 解决方法 下面我通过另一种方法很好的解决了这个问题 在我们的事件对象event中,存在着一个方法path,这个方法可以返回事件触发的所有父元素,我们可以使用这个方法...,整个方法的核心就是通过获取到触发事件元素的所有父元素集合,再通过筛选从而获得元素!...,因此我们可以通过事件对象下的path方法以及数组中的find方法选择出我们所要的列表项节点。

    3.1K30

    Vue如何在父级下使用v-slot的值

    关于作用域插槽v-slot的用法可以先看看文档 https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%...9F%9F%E6%8F%92%E6%A7%BD 现在我们进入正题 我们用到一个第三方组件validate,这个第三方组件的插槽传了一个属性error值给我们,我们现在想要在父级中获得这个error值,...我们觉得可以在v-slot下使用一个方法,把error传到父级去,不就行了吗,的确是可以的: https://jsfiddle.net/jswenjie/pxru6y2m/5/ 问题出现 我们的页面有多个...validate的情况下,需要搜集所有的error,那么我们可以用个数组:https://jsfiddle.net/jswenjie/pxru6y2m/7/ 我们发现虽然结果是正确的,不过在控制台下出现了...有死循环的问题。 问题解决 为了解决这个问题,我考虑到是否可以用一个组件把 父级和子集关联起来呢,相当于给他们搭建一个桥梁,结果证明是可以的,就是略显繁琐,不知道大家有没有更好的方法呢?

    1.8K20

    Python检测删除你的好友-wxpy模

    下面是代码: from wxpy import * import time print("本软件采用特殊字符检测,即对方收不到任何信息!")...    all_friends = bot.friends()#把微信所有好友放进列表     for i in all_friends:         try:             print("检测...        except:             pass         time.sleep(2) #延时防频繁     bot.file_helper.send('检测结束,请退出网页微信...#通过文件传输助手发送检测结束     bot.logout()     input("检测结束,任意键退出...") except KeyError:#这个错误是因为微信官方封禁了这个微信号登陆网页微信的接口...input("检测失败,任意键退出...") 运行代码后直接回车就会弹出登陆二维码,扫码登陆就可以了  程序就会自动检测所有好友了 然后手机上就可以看到伤心的一幕了:

    96820

    System.InvalidOperationException:“寄宿的 HWND 必须是指定父级的子窗口。”

    当试图在 WPF 窗口中嵌套显示 Win32 子窗口的时候,你有可能出现错误:“寄宿的 HWND 必须是指定父级的子窗口。”。 这是很典型的 Win32 错误,本文介绍如何修复此错误。...---- 我们在 MainWindow 中嵌入一个其他的窗口来承载新的 WPF 控件。...一般情况下我们当然不会这么去做,但是如果我们要跨越进程边界来完成 WPF 渲染内容的融合的时候,就需要嵌入一个新的窗口了。...由于窗口句柄是可以跨越进程边界传递的,所以这样的方式可以完成跨进程的 WPF 控件显示。...问题 你有可能在调试嵌入窗口代码的时候遇到错误: System.InvalidOperationException:“寄宿的 HWND 必须是指定父级的子窗口。”

    65030

    JS和JQuery获取当前元素的兄弟及父级等元素的方法

    parent() 或者 $("span").parent(".class") jQuery.parents(expr),类似于 jQuery.parents(expr) ,但是是查找所有祖先元素,不限于父元素...var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSibling;   //获得...s的下一个兄弟节点 var ps=s.previousSibling;  //得到s的上一个兄弟节点 var fc=s.firstChild;   //获得s的第一个子节点 var lc=s.lastChild...;   //获得s的最后一个子节点 JS获取节点父级,子级元素:JS的方法会比JQUERY麻烦很多,主要则是因为FF、谷歌浏览器会把你的换行也当作DOM元素:空的text元素,目前IE也是这样       原生的JS获取ID为test的元素下的子元素。

    13.6K10

    如何高效的批量删除亿级大表数据

    大概有一年左右的数据,一个表的数据已经达到亿级别的。这样算下来,一个表的数据至少是几十GB了。因此需要删除过期的数据,暂时保留近三个月的统计数据。...limit 10000 接着,我想用order by + limit实现删除,还是出现了上面的错误 后面DBA提示我说,为啥不用ID删除,说按id删除,速度和按索引列删除,不是一个数量级的 接着我想到了拆分一下...-04-06' 这里千万左右的数据大概需要10多秒 接着按id删除,一次删除10k,循环删除 delete from table_name where id < maxId limit 10000 直到把过期的时间删除完成...这里我没有msyql服务器的权限,通过java客户端连接删除,使用的spring jdbcTemplate这个接口 另外,这里一次删除10k还有个原因是,事务太大,影响其他服务的运行 还用到的技术,就是使用线程池来执行...还有一点就是,为了怕压到mysql服务器,这里线程池删除的时候回sleep(1000),阻塞1s再删除,减轻mysql服务器的压力 今天搞了一下数据删除这一点东西,感觉mysql水很深,比如一个select

    1.7K20

    如何高效的批量删除亿级大表数据

    大概有一年左右的数据,一个表的数据已经达到亿级别的。这样算下来,一个表的数据至少是几十GB了。因此需要删除过期的数据,暂时保留近三个月的统计数据。...limit 10000 接着,我想用order by + limit实现删除,还是出现了上面的错误 后面DBA提示我说,为啥不用ID删除,说按id删除,速度和按索引列删除,不是一个数量级的 接着我想到了拆分一下...-04-06' 这里千万左右的数据大概需要10多秒 接着按id删除,一次删除10k,循环删除 delete from table_name where id < maxId limit 10000 直到把过期的时间删除完成...这里我没有msyql服务器的权限,通过java客户端连接删除,使用的spring jdbcTemplate这个接口 另外,这里一次删除10k还有个原因是,事务太大,影响其他服务的运行 还用到的技术,就是使用线程池来执行...还有一点就是,为了怕压到mysql服务器,这里线程池删除的时候回sleep(1000),阻塞1s再删除,减轻mysql服务器的压力 今天搞了一下数据删除这一点东西,感觉mysql水很深,比如一个select

    4.8K20

    UTF-8编码中BOM的检测与删除

    对于UTF-8/16/32而言,它们名字中的8/16/32指的是编码单位是多少位的,也就是说,它们的编码单位分别是8/16/32位,换算成字节就是1/2/4字节,如果是多字节,就要牵扯到字节序,UTF-...UTF-8主要的优点是可以兼容ASCII,但如果使用BOM的话,这个好处就荡然无存了,除此以外,BOM的存在还可能引发一些问题,比如下面错误便都有可能是BOM导致的: Shell: No such file...or directory PHP: Warning: Cannot modify header information – headers already sent 在详细讨论UTF-8编码中BOM的检测与删除问题前...=utf-8 添加BOM: :set bomb 删除BOM: :set nobomb 查询BOM: :set bomb?...如何检测UTF-8编码中的BOM呢? shell> grep -r -I -l $'^\xEF\xBB\xBF' /path 如何删除UTF-8编码中的BOM呢?

    2.9K20

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

    我能想到的并且一直有效的方法就是添加一个外部(三方)的 iFrame,让它来检测 iFrame 内部是否可以访问到 Cookie,并且会将 Cookie 的可用状态通知给父应用。...虽然这听起来挺奇怪的,我们好像无法直接通过 iFrame 调用父页面的功能。...但是我们可以使用 Message Event 来进行父子应用之间的通信,通过这个我们可以基于 URL 向其他浏览器发送消息,在我们现在这种情况下,我们可以从 iFrame 向可能在不同域上的父应用发送消息...首先,我们在 iFrame 内添加一个立即执行函数。在这个函数中,我们添加一个消息事件监听器,这个监听器会在从父级应用程序调用时触发。...然后,我们通过 parent.postMessage() 方法向父应用发送一条消息;在 iFrame 中,parent 是一个隐含的对象。 <!

    88310

    用 TensorFlow 实现物体检测的像素级分类

    最近,TensorFlow 的「物体检测 API」有了一个新功能,它能根据目标对象的像素位置来确定该对象的像素。换句话来说,TensorFlow 的物体检测从原来的图像级别成功上升到了像素级别。...使用 TensorFlow 的「物体检测 API」图片中的物体进行识别,最后的结果是图片中一个个将不同物体框起来的方框。...最近,这个「物体检测 API」有了一个新功能,它能根据目标对象的像素位置确定该对象的像素,实现物体的像素分类。 ?...TensorFlow 的物体检测 API 模型——Mask-RCNN 实例分割 「实例分割」是物体检测的延伸,它能让我们在普通的物体检测的基础上获取关于该对象更加精确、全面的信息。...使用 fl_image 功能对视频中截取的每张图片进行物体检测,然后用修改后的视频图片替换原本的视频图片; 3. 最后,将修改后的视频图像合并成一个新的视频。

    1.4K60

    用 TensorFlow 实现物体检测的像素级分类

    最近,TensorFlow 的「物体检测 API」有了一个新功能,它能根据目标对象的像素位置来确定该对象的像素。换句话来说,TensorFlow 的物体检测从原来的图像级别成功上升到了像素级别。...使用 TensorFlow 的「物体检测 API」图片中的物体进行识别,最后的结果是图片中一个个将不同物体框起来的方框。...最近,这个「物体检测 API」有了一个新功能,它能根据目标对象的像素位置确定该对象的像素,实现物体的像素分类。 ?...TensorFlow 的物体检测 API 模型——Mask-RCNN 实例分割 「实例分割」是物体检测的延伸,它能让我们在普通的物体检测的基础上获取关于该对象更加精确、全面的信息。...使用 fl_image 功能对视频中截取的每张图片进行物体检测,然后用修改后的视频图片替换原本的视频图片; 3. 最后,将修改后的视频图像合并成一个新的视频。

    92120
    领券