文档章节

窗口之间通信类

o
 osc_z1hvg4cu
发布于 2018/04/24 12:48
字数 581
阅读 5
收藏 0

精选30+云产品,助力企业轻松上云!>>>

通信方式有很多种:

  • ajax 不支持跨域通信(XMLHttpRequest2 其实标准的浏览器也是可支持跨域,只要后端设置一下头部也是可以跨域的,设置header(Access-Control-Allow-Origin: http://mywebdomain.com) 
  • webSocket  支持跨域通信
  • JSONP 支持跨域通信
  • PostMessage 支持跨域通信
  • CORS   支持跨域也支持同源, 是一个新的通信协议标准

 

跨域通信的几种方式
  • JSONP
  • Hash
  • postMessage
  • WebSocket
  • CORS
  • 借助Nginx/Apache 。。。

 

今天先来看下窗口之间的通信方式:

一般窗口通信分为三种:

1. iframe嵌套:多个iframe之间通信。

  1. 父页面操作子页面元素:oFrame.contentWindow.document.body。
  2. 父页面调用子页面方法:oFrame.contentWindow.functionName()。
  3. 子页面调用父页面元素:window.top/parent/window

2. 用window.open()方法打开一个新的窗口。

 

  • 父页面操作子页面元素:window.open()打开子页面时,返回子页面窗口对象。
  • 子页面操作父页面元素:window.opener即为父窗口对象。

 

3. html5t提供的postMessage方法和message事件。(可以跨域通信)

  • postMessage():接收消息窗口对象.postMessage("发送的数据","接收的域"); 这里的域一定要带上协议
  • message事件:接收消息窗口监听message事件,事件对象中包含有origin属性和data属性。其中ev.origin可以获取发送数据的域,ev.data获取发送的具体数据。
  •  1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6     </head>
     7     <body>
     8         <iframe id="myFrame" src="http://localhost:63342/XChart/Iframe2.html" width="600px;"></iframe><br />
     9         <input type="button" value="向子窗口发送数据" id="btn" />
    10     </body>
    11 </html>
    12 <script type="text/javascript">
    13     window.onload = function(){
    14         var myFrame = document.getElementById("myFrame");
    15         var oBtn = document.getElementById("btn");
    16         
    17         oBtn.onclick = function(){
    18             myFrame.contentWindow.postMessage("testData","http://localhost:63342");
    19         }
    20     }
    21     function parentWindowHandler(){
    22         alert("这是父窗口的方法,可以被子窗口调用");
    23     }
    24 </script>
    postMessage
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6     </head>
     7     <body>
     8         <p>http://localhost:63342/XChart/Iframe2.html</p>
     9     </body>
    10 </html>
    11 <script type="text/javascript">
    12     window.onload = function(){
    13         window.addEventListener("message",function(ev){
    14             alert("父窗口向子窗口发送的数据是:" + ev.data);
    15             alert("数据来源是:" + ev.origin);
    16         })
    17     }
    18 
    19 </script>
    View Code
    其中postMessage和Message可以实现跨域的窗口间的通信。
    以上内容欢迎大家提出疑问,有问题可以随意提出,共同进步,共同学习!!
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Qt开发:跨窗口信号槽通信

版权声明:原创文章如需转载,请在左侧博主描述栏目扫码联系我并取得授权,谢谢 https://blog.csdn.net/u012234115/article/details/83387269 多窗口通信,如果是窗口类对象之间互相包含,则...

踏莎行hyx
2018/10/25
0
0
Java多线程学习:多个线程间共享数据

多个线程访问共享对象和数据的方式有两种情况: 1、每个线程执行的代码相同,例如,卖票:多个窗口同时卖这100张票,这100张票需要多个线程共享。 2、每个线程执行的代码不同,例如:设计四个...

HenrySun
2016/07/26
1.2K
0
多线程的情况

1、多个线程操作一个对象的同一个函数:场景 多窗口售票。 Ticket共享资源 implement Runnable run()进行售票。 2、多个线程操作一个对象的不同函数:场景 消费者+生产者。 Clerk类 get()进行...

哎那个新来的
2019/12/31
15
0
MFC sendmessage实现进程间通信

用sendmessage实现进程间通信。 1.WMCOPYDATA实现进程间通信 实现方式是发送WMCOPYDATA消息。 发送程序: LRESULT copyDataResult; //copyDataResult has value returned by other app CWnd ...

osc_sz3fldcb
2018/02/11
3
0
【计算机网络】TCP和UDP学习总结

一、TCP:传输控制协议(Transmission Control Protocol) 主要作用:把数据流分割成适当长度的报文段之后进行传输 工作机制:紧小细微型。它是面向连接的运输层协议。在使用TCP之前,应用程...

osc_nqztydej
2018/08/21
2
0

没有更多内容

加载失败,请刷新页面

加载更多

自从尝了 Rust,Java 突然不香了

Rust 是软件行业中相对而言比较新的一门编程语言,如果从语法上来比较,该语言与 C++ 其实非常类似,但从另一方面而言,Rust 能更高效地提供许多功能来保证性能和安全。而且,Rust 还能在无需...

osc_k3vwonkw
29分钟前
10
0
Java 高级 面试题 及 参考答案

一、面试题基础总结 1、 JVM结构原理、GC工作机制详解 答:具体参照:JVM结构、GC工作机制详解 ,说到GC,记住两点:1、GC是负责回收所有无任何引用对象的内存空间。 注意:垃圾回收回收的是无...

FH-Admin
30分钟前
26
0
机器学习中的AUC-ROC曲线

作者|ANIRUDDHA BHANDARI 编译|VK 来源|Analytics Vidhya AUC-ROC曲线 你已经建立了你的机器学习模型-那么接下来呢?你需要对它进行评估,并验证它有多好(或有多坏),这样你就可以决定是否...

osc_bg8v9gvf
31分钟前
8
0
音视频(消息)应用场景 :连麦交友例子

实现一个小例子: 效果类似唱吧APP里的 连麦交友功能,音视频,IM 及音视频 SDK参考融云服务商。 没有印象的可以搜索 ’连麦’ 关键字在 应用商店下载一款 连麦的软件 体验下 业务方面的需求...

T型人才追梦者
33分钟前
11
0
逛淘宝天猫想到SSO单点登录

我的原文地址:https://mp.weixin.qq.com/s/77xukPDlgkKnYpwu4LrqaA

osc_yy65eb2q
33分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部