利用内置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. django count(*) 慢查询优化

    分页显示是web开发常见需求,随着表数据增加,200万以上时,翻页越到后面越慢,这个时候慢查询成为一个痛点,关于count(*)慢的原因,简单说会进行全表扫描,再排序,导致查询变慢.这里介绍postg ...

  2. 小白学Java:奇怪的RandomAccess

    目录 小白学Java:奇怪的RandomAccess RandomAccess是个啥 forLoop与Iterator的区别 判断是否为RandomAccess 小白学Java:奇怪的RandomAc ...

  3. java 类初识

    一.定义 成员变量 成员方法 注意: 1.成员变量有默认值,是全局变量 2.成员方法,不需要使用static 3.成员变量的默认值 整型 0 浮点型 0.0 引用数据类型 null 二.使用 1.导包 ...

  4. javascript DOM练习

    一.定时器 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...

  5. 分布式唯一ID的生成方案

    分布式ID的特性 全局唯一 不能出现重复的ID,这是最基本的要求. 递增 有利于关系数据库索引性能. 高可用 既然是服务于分布式系统,为多个服务提供ID服务,访问压力一定很大,所以需要保证高可用. 信 ...

  6. RocketMQ 实战之快速入门

    原文地址:https://www.jianshu.com/p/824066d70da8 最近 RocketMQ 刚刚上生产环境,闲暇之时在这里做一些分享,主要目的是让初学者能快速上手RocketMQ. ...

  7. windows下RocketMQ安装部署

    一.预备环境 1.系统 Windows 2. 环境 JDK1.8.Maven.Git 二. RocketMQ部署 1.下载 1.1地址:http://rocketmq.apache.org/relea ...

  8. 每天敲一点code

    下面这段代码摘自 <C#并发编程经典实例> 并行LINQ static IEnumerable<int> MultiplyBy2(IEnumerable<int> ...

  9. Windows环境下配置robotframework

    Robot Framework安装准备 一.python3.6以上版本 安装过程中勾选“add python to path”,就可以自动配置好环境变量. 安装完成后在命令行输入python,如下图所 ...

  10. linux C++类中成员变量和函数的使用

    1.undefined reference to XXX 问题原因 1)XXX所在的so库等未指定 2)XXX在类中实现的时候没有加上类::函数的格式 2. was not declared in t ...