窗口之间通信类

最新推荐文章于 2024-03-30 23:19:48 发布
最新推荐文章于 2024-03-30 23:19:48 发布
阅读量77 收藏
点赞数
文章标签： 网络 运维 javascript ViewUI
原文链接：http://www.cnblogs.com/chenyajie/p/8928896.html
版权

通信方式有很多种：

  • 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
  1. 其中postMessage和Message可以实现跨域的窗口间的通信。
  1. 以上内容欢迎大家提出疑问，有问题可以随意提出，共同进步，共同学习！！

转载于:https://www.cnblogs.com/chenyajie/p/8928896.html

weixin_30535167
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
两个窗口之间的通信
chenzihong123的博客
01-02 2325
两个窗口之间的通信 1.localstorage 一个窗口更新localStorage，另一个窗口监听window对象的”storage”事件，来实现通信。(localStorage需要同源窗口才能共享，即协议，域名，端口一致) // 本窗口的设值代码 localStorage.setItem('aaa', (Math.random()*10).toString()) // 其他窗口监听stor...
HTML5之窗口间通信
努力，追梦的博客
06-25 6823
准备工作：虚拟主机相关配置     同域下窗口间通信的二种方式:1.iframe  2 window.open   同域下的窗口通信 方式一：iframe 1.    iframe.html （1）      父级页面(1.iframe.html)通过点击按钮改变子级页面（2.iframe.html）的背景颜色 /* 我们可以通过js去访问被包含页面的DOM元素 */
浏览器的两个页面之间通信的问题
yiyueqinghui的博客
10-19 5671
两个浏览器窗口间通信总结： 1、localStorage 一个窗口更新localStorage， 另一个窗口监听window对象的”storage”事件，来实现通信。 // 本窗口的设值代码 localStorage.setItem('aaa', (Math.random()*10).toString()) // 其他窗口监听storage事件 window.addEventListener("storage", function (e) { console.log(e) console.log
跨浏览器窗口通讯 ，7种方式，你还知道几种呢？
最新发布
成长的程序世界，一起成长
03-30 1134
人与人要沟通，页面与页面之前也要沟通。页面间的7种基础交流方面，满足你的各种需求？ 您还有哪些高级的交流方式呢？
多窗口通信
scelmx的博客
06-21 913
之前介绍过的 BroadcastChannel 是一种原生的浏览器 API，用于在不同窗口之间进行实时通信。它具有跨浏览器兼容性和简单易用性的优势，但限于同一浏览器的窗口间通信。跨浏览器兼容性：BroadcastChannel 在现代浏览器中得到广泛支持，包括 Chrome、Firefox、Safari 等。简单易用性：使用 BroadcastChannel 只需几行代码，无需复杂的设置和配置。实时性：消息几乎可以即时地在各个窗口之间传递，使得实时通信更加流畅和高效。
浏览器窗口通信的多种方式
qsya的博客
09-22 1753
» 介绍 WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 用 nodejs 简单的搭建 websocket 服务实现多页面通信，效果如下： » nodejs搭建websocket服务 新建文件夹 websocket 执行 npm init -y 初始化项目 执行 npm i ws 安装 ws 依赖 新建 server.js 文件 执行 node server.js 启动服
多线程与窗体之间通信实例
05-07
实现多窗体显示，窗体之间发送消息与接收 窗体之间通信
易语言程序之间通信模拟
08-22
程序之间通信模拟系统结构:SendMessage, ======窗口程序集1 || ||------_按钮1_被单击 || ||------_标签1_反馈事件 || ||------_时钟1_周期事件 || ||------_窗口1_创建完毕 || || ======窗口程序集2 || ||----
多窗口之间的通信
11-02
[每日一学]MFC学习笔记——多窗口之间的通信 http://blog.csdn.net/kingsollyu/article/details/8312910
窗口间的通信（消息互发与数据传递）
积累点滴，保持自我
03-14 2633
一.窗口间的消息互发： 首先建立一个接收程序：ReceiveMessage.exe 代码：            .386 .model flat,stdcall option casemap:none ;>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ; Inclu
浏览器窗口间通信
WindrunnerMax
05-17 1555
浏览器窗口间通信 浏览器多个标签页窗口间通信，主要是指的同源的多个页面间的通信，主要方法有本地存储通信、Web Worker通信、Web Socket通信。 本地存储通信 通过浏览器对于同源页面本地存储是共享的策略实现通信，主要可以使用localStorage、cookie、indexDB，注意对于sessionStroage是在同一会话有效的，在MDN中提到，通过点击链接或者使用window.open打开的新标签页之间是属于同一个session的，新的标签页会继承上一级会话的sessionStroage，
MFC消息三部曲（3）——多窗口之间的通信
踏莎行的博客
06-27 2778
【原文】http://blog.csdn.net/kingsollyu/article/details/8312910
总结：子窗口创建及父窗口与子窗口之间通信
Squirrel的专栏
08-15 7316
1、Javascript弹出子窗口可以通过多种方式实现，下面介绍几种方法(1) 通过window对象的open()方法，open()方法将会产生一个新的window窗口对象    其用法为： window.open(URL,windowName,parameters);  URL: 描述要打开的窗口的URL地址，如何为空则不打开任何网页；  windowName:描述被打开的窗口的
C#窗口间通讯
gmadc的博客
08-15 523
主窗体Form1是一个ListBox，单击选中某列时，弹出窗体Form2，Form2中两个控件，一个是TextBox，显示选中的该列的文本，另一个是按钮，点击时将修改后的值回传，且在Form1中修改相应的列的文本，同时Form2关闭。 C#窗体间通讯方法一：传值 public partial class Form2 : Form { private string text; private ListBox lb; .
c#窗体之间的数据通信
05-27
在 C# 窗体应用程序中，可以使用多种方式实现窗体之间的数据通信，以下是几种常见的方式： 1. 使用委托：定义一个委托，将需要传递的数据作为参数，当需要传递数据时，调用该委托，如： ``` public delegate void DataDelegate(string data); // 定义委托变量 public DataDelegate dataDelegate; // 在窗体中调用委托 dataDelegate?.Invoke(data); // 在另一个窗体中将委托变量赋值为第一个窗体中的委托 form1.dataDelegate = form2.dataDelegate; ``` 2. 使用事件：定义一个事件，将需要传递的数据作为参数，当需要传递数据时，触发该事件，如： ``` public event EventHandler<DataEventArgs> DataEvent; // 触发事件，传递数据 DataEvent?.Invoke(this, new DataEventArgs(data)); // 在另一个窗体中订阅事件，接收数据 form1.DataEvent += (sender, e) => { string data = e.Data; }; ``` 3. 使用公共静态变量：在一个静态类中定义一个公共静态变量，来存储需要传递的数据，如： ``` public static class DataHelper { public static string Data { get; set; } } // 在一个窗体中设置数据 DataHelper.Data = data; // 在另一个窗体中获取数据 string data = DataHelper.Data; ``` 4. 使用消息机制：使用 Windows API 中的 SendMessage 和 PostMessage 方法，将需要传递的数据封装在消息中，发送给另一个窗体，如： ``` [DllImport("user32.dll", EntryPoint = "SendMessage")] public static extern IntPtr SendMessage(IntPtr hWnd, uint Msg, IntPtr wParam, IntPtr lParam); [DllImport("user32.dll", EntryPoint = "PostMessage")] public static extern bool PostMessage(IntPtr hWnd, uint Msg, IntPtr wParam, IntPtr lParam); // 定义消息常量 public const int WM_MYMESSAGE = 0x0400; // 封装消息，将需要传递的数据作为 lParam 参数 var data = "hello"; var lParam = Marshal.StringToHGlobalAnsi(data); SendMessage(hwnd, WM_MYMESSAGE, IntPtr.Zero, lParam); ``` 以上是几种常见的窗体之间的数据通信方式，在实际应用中，可以根据具体情况选择适合的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值