利用内置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. Gym - 101982F 扫描线+线段树

    题目链接:https://codeforces.com/gym/101982/attachments 要你求覆盖奇数次的矩形面积并,每次更新时减去原先的值即可实现奇数次有效,下推时为保证线段长度不变左 ...

  2. 创建dynamics CRM client-side (七) - 用JS 来控制Auto-Save

    在我们的system setting里面, 我们可以设置打开/关闭 auto save的功能. 我们可以用js来控制auto-save this.formOnSave = function (exec ...

  3. Charles的安装及使用过程

    一.charles的使用 1.1  charles的说明 Charles其实是一款代理服务器,通过过将自己设置成系统(电脑或者浏览器)的网络访问代理服务器,然后截取请求和请求结果达到分析抓包的目的.该 ...

  4. linux--->配置lamp环境(centos7 最小版)

    这篇博客写的很全,按照顺序敲代码即可 参考:https://www.cnblogs.com/me80/p/7218883.html

  5. Docker底层架构之联合文件系统

    联合文件系统(UnionFS)是一种分层.轻量级并且高性能的文件系统,它支持对文件系统的 修改作为一次提交来一层层的叠加,同时可以将不同目录挂载到同一个虚拟文件系统下(unite several di ...

  6. 《Android Studio实战 快速、高效地构建Android应用》--二、在Android Studio中编程

    代码折叠 Ctrl+数字加号展开光标处已折叠代码块 Ctrl+数字减号折叠光标处已展开代码块 Ctrl+Shift+数字加号展开窗口中全部代码 Ctrl+Shift+数字减号折叠窗口中全部代码 注释代 ...

  7. Java使用自定义类加载器实现热部署

    热部署: 热部署就是在不重启应用的情况下,当类的定义即字节码文件修改后,能够替换该Class创建的对象.一般情况下,类的加载都是由系统自带的类加载器完成,且对于同一个全限定名的java类,只能被加载一 ...

  8. Git的指令

    一,访问本地Git 上一节我们已学会了如何注册GitHub和安装Git 现在先打开电脑终端或Git Bash,首先和Git打个招呼,输入Git 二.新建文件/进入文件夹 mkdir + 文件名    ...

  9. Codeforces_799

    A.求两个时间比较一下. #include<bits/stdc++.h> using namespace std; int n,t,k,d; int main() { ios::sync_ ...

  10. CCF_201512-1_数位之和

    水. #include<iostream> #include<cstdio> using namespace std; int main() { ; cin >> ...