利用内置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. Milking Cows 挤牛奶 USACO 排序 模拟

    1005: 1.2.1 Milking Cows 挤牛奶 时间限制: 1 Sec  内存限制: 128 MB提交: 15  解决: 9[提交] [状态] [讨论版] [命题人:外部导入] 题目描述 1 ...

  2. BFT-SMaRt:用Netty做客户端的可靠信道

    目录 一.Netty服务端的构建 1. 父类构造函数 ① 查找缓存 ② 相关日志 2. 服务端构造 ① 配置读取 ② 服务端配置 3. 服务端功能 ① 通用接口功能 ② Channel处理器 4. 节 ...

  3. Nginx作为web静态资源服务器——跨域访问

    跨站访问 ​ 为什么浏览器禁止跨域访问 ​ Nginx跨站访问 Syntax:add_header name value [always]; Default:—— Context:http,serve ...

  4. 16. 产生Javadoc

    过程与export >> javadoc一致,需要注意的是字符集的设置. -encoding UTF-8 -charset UTF-8 export >> javadoc : ...

  5. 洛谷 UVA1395 苗条的生成树 Slim Span

    题目链接 题目描述 求所有生成树中最大边权与最小边权差最小的,输出它们的差值. 题目分析 要求所有生成树中边权极差最小值,起初令人无从下手.但既然要求所有生成树中边权极差最小值,我们自然需要对每一棵生 ...

  6. Qt Installer Framework翻译(1)

    IFW概览 Qt Installer Framework 提供了一组工具和程序来创建安装程序,并在不重写源代码的情况下将它们部署到所有受支持的桌面 Qt 平台上.安装程序具有本地化外观,并且可以感知运 ...

  7. spring cloud的配置

    注解篇 @EnableEurekaServer 注解启动一个服务注册中心提供给其他应用进行对话 @EnableDiscoveryClient 激活Eureka中的DiscoveryClient实现 配 ...

  8. QTP测试web时:打开ie浏览器进行录制但qtp录制脚本为空

    1. 关闭ie的保护模式:设置——internet选项——安全——取消勾选“启用保护模式” 这一步很关键,之前试过很多步骤,只有这个成功了. 修改后如果可行即可.如果不行再进行下面操作: 2.关闭杀毒 ...

  9. idea中当前模块资源目录上显示属于其他模块

    一.错误的2个显示 1.错误显示 src/main目录下的java和resources本来属于cloud-consumer-dept-feign模块 但是在src/main/java却是显示src/m ...

  10. Linux系统实时数据同步inotify+rsync

    一.inotify简介 inotify是Linux内核的一个功能,它能监控文件系统的变化,比如删除.读.写和卸载等操作.它监控到这些事件的发生后会默认往标准输出打印事件信息.要使用inotify,Li ...