利用内置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. dp - 逆序数序列

    对于一个数列{ai},如果有i<j且ai>aj,那么我们称ai与aj为一对逆序对数.若对于任意一个由1~n自然数组成的 数列,可以很容易求出有多少个逆序对数.那么逆序对数为k的这样自然数数 ...

  2. Core 定时任务之TimeJob

    第一:引入NuGet包: Install-Package Pomelo.AspNetCore.TimedJob -Version -rtm- 第二: 在StartUp 中注册Job: public c ...

  3. AVR单片机教程——定时器中断

    本文隶属于AVR单片机教程系列.   中断,是单片机的精华. 中断基础 当一个事件发生时,CPU会停止当前执行的代码,转而处理这个事件,这就是一个中断.触发中断的事件成为中断源,处理事件的函数称为中断 ...

  4. scrapy selector选择器

    这部分内容属于补充内容 1.xpath() 2.css() 3.正则表达式 # 多个值,列表 response.xpath('//a/text()').re('(.*?):\s(.*)') # 取第一 ...

  5. Manipulating Data from Oracle Object Storage to ADW with Oracle Data Integrator (ODI)

    0. Introduction and Prerequisites This article presents an overview on how to use Oracle Data Integr ...

  6. 9、python判断语句与循环语句

    前言:本文主要介绍python判断语句与循环语句,包括if语句.while循环.for循环.range函数. 一.if语句  关键字:if.elif.else,写法如下: # if if 条件: # ...

  7. centos7下redis安全相关

    Centos7下redis安全相关 在使用云服务器时,安装的redis3.0+版本都关闭了protected-mode,因而都遭遇了挖矿病毒的攻击,使得服务器99%的占用率!! 因此我们在使用redi ...

  8. orcle导入大数据文件

    0,创建ctl文件  内容为 OPTIONS (skip=0) LOAD DATA  CHARACTERSET 'UTF8' INFILE 'F:\anhui_data\20180814\shangh ...

  9. Hexo Next 接入 google AdSense 广告

    前言 个人网站 www.yanlongwang.net 已经运营近一年,每日的浏览量不断上升,现在维持在两位数,打算承接一点广告赚睡后收入,用来维持网站的日常运营,希望能覆盖网站的服务器和域名开销. ...

  10. 原生Ajax发送get、post请求每一步

    说明 发送Ajax的请求的核心对象是XMLHttpRequest,因此我们需要了解该对象的相关属性和方法 方法(图一) 属性(图二) 第一步:创建 XMLHttpRequest对象,下面都简写为 xh ...