利用内置iframe进行通讯

1. 在当前网页设置iframe网页(监听iframe发来postmessage消息事件)

a. 外部网页接收数据:

回调方法,其中e.data为传入数据:

const onmessage = (e: any) => { e.data };

If (typeof window.addEventListener !== ‘undefined’){

window.addEventListener(‘message’, onmessage , false);

} else if(typeof window.attachEvent !== ‘undefined’){

window.attachEvent(‘message’, onmessage );

}

b. 外部网页向内部iframe发数据:

window.frames.iframe元素id名.contentWindow.postMessage(数据, ‘*’)

2. Iframe设置的url去加载我们写的js文件内部写

内部iframe向外部网页发数据:window.parent.postMessage({data: ‘aa’}, ‘*’);

内部iframe接收数据同上

和内嵌的iframe进行通讯的更多相关文章

  1. [转]内嵌页面iframe以及和其兄弟iframe的相互传值

    原文出处 iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法) 主页面调用iframe: iframe页面调用主页面: 主页面的包含的iframe之间相互调用: 主 ...

  2. Selenium入门7 内嵌框架iframe

    如果网页内嵌iframe,那么iframe里的元素是无法直接定位的,需要使用switch_to.frame进入frame操作: 之后需要再操作页面上非嵌入在iframe里的元素,需要使用switch_ ...

  3. iframe内嵌页面——跨域通讯

      <template> <div class="act-form"> <iframe :src="src" ref=" ...

  4. C#通过WatiN操作页面中内嵌的Iframe

    通过WatiN.Core.Broswer.Frame()方法来获取iframe对象,之后的容器就是frame,然后进行操作. 下面的例子是登录QQ空间的: Frame frame = browser. ...

  5. 一个页面中内嵌页面 iframe元素

    iframe.html: <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

  6. 弹出窗口内嵌iframe 框口自适应

    说一下,弹出窗口还有内嵌一个iframe 这种模式应该是不科学的,但是公司项目里面就偏偏用到了,它这高低还不能只适应,所以我痛苦的日子来了 分析一下: 首先window.showDialog 方法的时 ...

  7. html内嵌框架

    html内嵌框架 <iframe>标签会创建包含另外一个html文件的内联框架(即行内框架),src属性来定义另一个html文件的引用地址,frameborder属性定义边框,scroll ...

  8. form表单以及内嵌框架标签

    今关于今天所学习的东西又复杂又简单,上午学习了form表单,也是挺简单的:搭配table表格使用也是非常熟练. 下午讲了讲给网页内嵌框架标签以及在内嵌框架标签中添加其他的网页:还有在内嵌框架标签中添加 ...

  9. html5-5 HTML5表单元素和内嵌框架

    html5-5   HTML5表单元素和内嵌框架 一.总结 一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...

随机推荐

  1. Unity_Dungeonize 随机生成迷宫

    本文对随机生成迷宫的实现思路进行记录,其作用在于为游戏过程提供随机性以及节省开发周期,下面是Dungeonize的结构 随机迷宫的生成主要包括几个阶段 1.生成房间体结构,为墙体,自定义房间,自定义物 ...

  2. 大白话原型模式(Prototype Pattern)

    意图 原型模式是创建型设计模式,可以复制已存在的对象而无需依赖它的类. 问题 假如现在有一个对象,我们想完全复制一份新的,我们该如何做? 创建同一个类的新对象 遍历所有已存在对象的值,然后将他们的值复 ...

  3. 云原生 - 体验Istio的完美入门之旅(一)

    作者:justmine 头条号:大数据达摩院 微信公众号:大数据处理系统 创作不易,在满足创作共用版权协议的基础上可以转载,但请以超链接形式注明出处. 为了方便大家阅读,可以关注头条号或微信公众号,后 ...

  4. Codeforces Round #615 (Div. 3) 题解

    A - Collecting Coins 题意: 给你四个数a,b,c,d,n.问你是否能将n拆成三个数A,B,C,使得A+a=B+b=C+c. 思路: 先计算三个数的差值的绝对值abs,如果abs大 ...

  5. 生产者消费者代码学习,Producer_Consuner

    使用BlockingQuery实现生产者者消费者:考虑并发,解耦. 生产者消费者模式是面向过程的设计模式. 生产者制造数据   ------> 生产者把数据放入缓冲区  -------> ...

  6. 通过示例学习rholang(上部:课程0-6)

    通过例子和实践来学习rho语言.下面的例子和练习都很值得去运行.阅读.修改和完善.修改练习和教程中任何你感到有意思的代码,这样能够获得最好的学习效果.该教程包含了rho语言最常见以及最重要的特性,足以 ...

  7. typescript 为什么使用 let呢

    为什么是使用let呢 因为已经厌烦了 int var 呵呵

  8. 基于 Lind.DDD 的 权限管理系统

    先起个头,在跟吧 表结构  12个表   ps: sxiaomais.blog.163.com/blog/static/31741203200811102630406/ 需要数据库 文件的 附件 权限 ...

  9. Day9-Python3基础-多线程、多进程

    1.进程.与线程区别 2.python GIL全局解释器锁 3.线程 语法 join 线程锁之Lock\Rlock\信号量 将线程变为守护进程 Event事件 queue队列 生产者消费者模型 Que ...

  10. PMP——项目管理的价值观与方法论

    关于项目管理的十个成语: 未雨绸缪(计划.风险):识别风险.做出计划.并指定负责人: 防微杜渐(监控.纠正):持续的实时的监控计划,监控和发现偏差,并进行纠正: 资源集成(整合.采购):把最专业的资源 ...