一般窗口通信分为三种：

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

    • 父页面操作子页面元素：oFrame.contentWindow.document.body。
    • 父页面调用子页面方法：oFrame.contentWindow.functionName()。
    • 子页面调用父页面元素：window.top/parent/window
     <!DOCTYPE html>
    
 <html>
    
     <head>
    
         <meta charset="UTF-8">
    
         <title></title>
    
     </head>
    
     <body>
    
         <iframe id="myFrame" src="Iframe2.html"></iframe><br />
    
         <input type="button" value="改变子窗口的背景色" id="btn1" />
    
         <input type="button" value="调用子窗口的方法" id="btn2" />
    
     </body>
    
 </html>
    
 <script type="text/javascript">
    
     window.onload = function(){
    
         var myFrame = document.getElementById("myFrame");
    
         var oBtn1 = document.getElementById("btn1");
    
         var oBtn2 = document.getElementById("btn2");
    
         oBtn1.onclick = function(){
    
             myFrame.contentWindow.document.body.style.background = "greenyellow";
    
         }
    
         oBtn2.onclick = function(){
    
             myFrame.contentWindow.chlidWindowHandler();
    
         }
    
     }
    
     function parentWindowHandler(){
    
         alert("这是父窗口的方法，可以被子窗口调用");
    
     }
    
 </script>
     <!DOCTYPE html>
    
 <html>
    
     <head>
    
         <meta charset="UTF-8">
    
         <title></title>
    
     </head>
    
     <body>
    
         <h1>这是iframe2</h1>
    
         <input type="button" value="改变父窗口的背景色" id="btn1" />
    
         <input type="button" value="调用父窗口的方法" id="btn2" />
    
     </body>
    
 </html>
    
 <script type="text/javascript">
    
     window.onload = function(){
    
         var oBtn1 = document.getElementById("btn1");
    
         var oBtn2 = document.getElementById("btn2");
    
         oBtn1.onclick = function(){
    
             window.top.document.body.style.background = "deepskyblue";
    
             console.log(window.top);
    
         }
    
         oBtn2.onclick = function(){
    
             window.top.parentWindowHandler();
    
         }
    
     }
    
     function chlidWindowHandler(){
    
         alert("这是子窗口的方法，可以被父窗口调用");
    
     }
    
 </script>
  2. 用window.open()方法打开一个新的窗口。
      • 父页面操作子页面元素：window.open()打开子页面时，返回子页面窗口对象。
      • 子页面操作父页面元素：window.opener即为父窗口对象。
     <!DOCTYPE html>
    
 <html>
    
     <head>
    
         <meta charset="UTF-8">
    
         <title></title>
    
         <style type="text/css">
    
             input{margin:10px;}
    
         </style>
    
     </head>
    
     <body>
    
         <input type="button" name="" id="btn1" value="打开一个新窗口" /><br />
    
         <input type="button" name="" id="btn2" value="改变子窗口背景色" /><br />
    
         <input type="button" name="" id="btn3" value="调用子窗口方法" />
    
     </body>
    
 </html>
    
 <script type="text/javascript">
    
     window.onload = function(){
    
         var oBtn1 = document.getElementById("btn1");
    
         var oBtn2 = document.getElementById("btn2");
    
         var oBtn3 = document.getElementById("btn3");

         var childWin = null;
    
         oBtn1.onclick = function(){
    
             childWin = window.open("child.window.html","_blank");
    
         }
    
         oBtn2.onclick = function(){
    
             //方法1
    
             childWin.document.body.style.background = "greenyellow";
    
         }
    
         oBtn3.onclick = function(){
    
             childWin.childWinHandler();
    
         }
    
     }
    
     function parentWinHandler(){
    
         alert("这是父窗口方法，可以被子窗口调用");
    
     }
    
 </script>
     <!DOCTYPE html>
    
 <html>
    
     <head>
    
         <meta charset="UTF-8">
    
         <title></title>
    
     </head>
    
     <body>
    
         <input type="button" name="" id="btn1" value="改变父窗口背景色" />
    
         <input type="button" name="" id="btn2" value="调用父窗口的方法" />
    
     </body>
    
 </html>
    
 <script type="text/javascript">
    
     window.onload = function(){
    
         var oBtn1 = document.getElementById("btn1");
    
         var oBtn2 = document.getElementById("btn2");
    
         oBtn1.onclick = function(){
    
             window.opener.document.body.style.background = "deepskyblue";
    
         }
    
         oBtn2.onclick = function(){
    
             window.opener.parentWinHandler();
    
         }
    
     }

     function childWinHandler(){
    
         alert("这是子窗口的事件，可以被父窗口调用");
    
     }
    
 </script>
  3. html5t提供的postMessage方法和message事件。
      • postMessage():接收消息窗口对象.postMessage("发送的数据","接收的域"); 这里的域一定要带上协议
      • message事件：接收消息窗口监听message事件，事件对象中包含有origin属性和data属性。其中ev.origin可以获取发送数据的域，ev.data获取发送的具体数据。
     <!DOCTYPE html>
    
 <html>
    
     <head>
    
         <meta charset="UTF-8">
    
         <title></title>
    
     </head>
    
     <body>
    
         <iframe id="myFrame" src="http://localhost:63342/XChart/Iframe2.html" width="600px;"></iframe><br />
    
         <input type="button" value="向子窗口发送数据" id="btn" />
    
     </body>
    
 </html>
    
 <script type="text/javascript">
    
     window.onload = function(){
    
         var myFrame = document.getElementById("myFrame");
    
         var oBtn = document.getElementById("btn");

         oBtn.onclick = function(){
    
             myFrame.contentWindow.postMessage("testData","http://localhost:63342");
    
         }
    
     }
    
     function parentWindowHandler(){
    
         alert("这是父窗口的方法，可以被子窗口调用");
    
     }
    
 </script>
     <!DOCTYPE html>
    
 <html>
    
     <head>
    
         <meta charset="UTF-8">
    
         <title></title>
    
     </head>
    
     <body>
    
         <p>http://localhost:63342/XChart/Iframe2.html</p>
    
     </body>
    
 </html>
    
 <script type="text/javascript">
    
     window.onload = function(){
    
         window.addEventListener("message",function(ev){
    
             alert("父窗口向子窗口发送的数据是：" + ev.data);
    
             alert("数据来源是：" + ev.origin);
    
         })
    
     }

 </script>

html5 窗口之间的通信的更多相关文章

  1. 父窗口，子窗口之间的JS"通信"方法

    今天需要在iframe内做一个弹窗,但使用弹窗组件的为子窗口,所以弹窗只在子窗口中显示掩膜层和定位,这样不符合需求. 后来晓勇哥指点,了解到一个以前一直没关注到的东西,每个窗口的全局变量,其实都存在对 ...

  2. 使用HTML5 的跨域通信机制进行数据同步

    离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统,并在网络畅通的情况下与服务器进行数据交互. 所以离线应用系统最终会做成类似C/S架构的客户端应用程序.这边基于Chrome或者 S ...

  3. Delphi 两个应用程序（进程）之间的通信

    两个应用程序之间的通信实际上是两个进程之间的通信.由于本人知识有限,决定应用消息来实现.需要用到的知识: 1.RegisterWindowMessage(); //参数类型:pchar:返回值:Lon ...

  4. Android模拟器的ip获取以及模拟器之间socket通信

    Android模拟器的ip获取以及模拟器之间socket通信           http://kalogen.iteye.com/blog/1565507 作者:李波 实现网络五子棋时用到了两个设备 ...

  5. VC中利用多线程技术实现线程之间的通信

    当前流行的Windows操作系统能同时运行几个程序(独立运行的程序又称之为进程),对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程,线程提供了多任务处理的能力.用进程和线程的观点来研究软 ...

  6. 网络编程之Socket的TCP协议实现客户端与客户端之间的通信

    我认为当你学完某个知识点后,最好是做一个实实在在的小案例.这样才能更好对知识的运用与掌握 如果你看了我前两篇关于socket通信原理的入门文章.我相信对于做出我这个小案列是完全没有问题的!! 既然是小 ...

  7. 基于WSAAsyncSelect模型的两台计算机之间的通信

    任务目标 编写Win32程序模拟实现基于WSAAsyncSelect模型的两台计算机之间的通信,要求编程实现服务器端与客户端之间双向数据传递.客户端向服务器端发送"请输出从1到1000内所有 ...

  8. MFC 窗口分割与通信

    一.关于CSplitterWnd类我们在使用CuteFtp或者NetAnt等工具的时候,一般都会被其复杂的界面所吸引,在这些界面中窗口被分割为若干的区域,真正做到了窗口的任意分割. 那么我们自己如何创 ...

  9. JS观察者设计模式：实现iframe之间快捷通信

    观察者设计模式又称订阅发布模式,在JS中我们习惯叫做广播模式,当多个对象监听一个通道时,只要发布者向该通道发布命令,订阅者都可以收到该命令,然后执行响应的逻辑.今天我们要实现的就是通过观察者设计模式, ...

随机推荐

  1. PAT_A1107#Social Clusters

    Source: PAT A1107 Social Clusters (30 分) Description: When register on a social network, you are alw ...

  2. perf-perf stat用户层代码分析

    perf_event 源码分析 前言 简单来说,perf是一种性能监测工具,它首先对通用处理器提供的performance counter进行编程,设定计数器阈值和事件,然后性能计数器就会在设定事件发 ...

  3. 三、Scrapy中选择器用法

    官方示例源码<html> <head>  <base href='http://example.com/' />  <title>Example web ...

  4. 第三节：初识pandas之DataFrame（上）

    DataFrame是Python中Pandas库中的一种数据结构,它类似excel,是一种二维表.

  5. Tkinter图形界面设计（GUI）

    [因为这是我第一个接触的GUI图形界面python库,现在也不用了,所以大多数内容都来自之前花 钱买的一些快速入门的内容,可以当作简单的知识点查询使用] 在此声明:内容来自微信公众号GitChat,付 ...

  6. 该页必须使用安全性较高的Web 浏览器查看

    当用https访问某个网站时,IE提醒“该页必须使用安全性较高的Web 浏览器查看” 您要访问的资源使用了128位版本的“安全套接层(SSL)” 安全保护.要查看该资源,您需要使用支持该版本的SSL浏 ...

  7. Spring MVC-表单（Form）标签-单选按钮（RadioButton）示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_radiobutton.htm 说明:示例基于Spring MVC 4.1.6. ...

  8. 高仿京东APP首页“京东快报”自己主动向上滚动的广告条

    转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/51013562 本文出自:[顾林海的博客] 前言 上次在京东APP上买东 ...

  9. hiho challenge 15 C题

    DP题.状态很容易设,dp[u][0]表示u点子树解决,dp[u][1]表示剩一条链,dp[u][2]表示邻边全炸. 转移有点难,看代码解释: #include <iostream> #i ...

  10. ACdream区域赛指导赛之专题赛系列(1)の数学专场

    Contest : ACdream区域赛指导赛之专题赛系列(1)の数学专场 A:EOF女神的相反数 题意:n(<=10^18)的数转化成2进制.翻转后(去掉前导零)输出十进制 思路:water ...