html5 窗口之间的通信
一般窗口通信分为三种：
- 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> - 用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> - 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 窗口之间的通信的更多相关文章
- 父窗口，子窗口之间的JS"通信"方法
今天需要在iframe内做一个弹窗,但使用弹窗组件的为子窗口,所以弹窗只在子窗口中显示掩膜层和定位,这样不符合需求. 后来晓勇哥指点,了解到一个以前一直没关注到的东西,每个窗口的全局变量,其实都存在对 ...
- 使用HTML5 的跨域通信机制进行数据同步
离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统,并在网络畅通的情况下与服务器进行数据交互. 所以离线应用系统最终会做成类似C/S架构的客户端应用程序.这边基于Chrome或者 S ...
- Delphi 两个应用程序（进程）之间的通信
两个应用程序之间的通信实际上是两个进程之间的通信.由于本人知识有限,决定应用消息来实现.需要用到的知识: 1.RegisterWindowMessage(); //参数类型:pchar:返回值:Lon ...
- Android模拟器的ip获取以及模拟器之间socket通信
Android模拟器的ip获取以及模拟器之间socket通信 http://kalogen.iteye.com/blog/1565507 作者:李波 实现网络五子棋时用到了两个设备 ...
- VC中利用多线程技术实现线程之间的通信
当前流行的Windows操作系统能同时运行几个程序(独立运行的程序又称之为进程),对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程,线程提供了多任务处理的能力.用进程和线程的观点来研究软 ...
- 网络编程之Socket的TCP协议实现客户端与客户端之间的通信
我认为当你学完某个知识点后,最好是做一个实实在在的小案例.这样才能更好对知识的运用与掌握 如果你看了我前两篇关于socket通信原理的入门文章.我相信对于做出我这个小案列是完全没有问题的!! 既然是小 ...
- 基于WSAAsyncSelect模型的两台计算机之间的通信
任务目标 编写Win32程序模拟实现基于WSAAsyncSelect模型的两台计算机之间的通信,要求编程实现服务器端与客户端之间双向数据传递.客户端向服务器端发送"请输出从1到1000内所有 ...
- MFC 窗口分割与通信
一.关于CSplitterWnd类我们在使用CuteFtp或者NetAnt等工具的时候,一般都会被其复杂的界面所吸引,在这些界面中窗口被分割为若干的区域,真正做到了窗口的任意分割. 那么我们自己如何创 ...
- JS观察者设计模式：实现iframe之间快捷通信
观察者设计模式又称订阅发布模式,在JS中我们习惯叫做广播模式,当多个对象监听一个通道时,只要发布者向该通道发布命令,订阅者都可以收到该命令,然后执行响应的逻辑.今天我们要实现的就是通过观察者设计模式, ...
随机推荐
- ABP生成错误：必须添加对程序集“netstandard”的引用
当前使用ABP版本为:4.6.0 升级vs2017到15.4版本,升级framework到4.7版本 如果Core版本请升级到net core 2
- Java多线程学习笔记（一）——多线程实现和安全问题
1. 线程.进程.多线程: 进程是正在执行的程序,线程是进程中的代码执行,多线程就是在一个进程中有多个线程同时执行不同的任务,就像QQ,既可以开视频,又可以同时打字聊天. 2.线程的特点: 1.运行任 ...
- PHP 之phpqrcode类库生成二维码
<?php /** * Created by PhpStorm. * User: 25754 * Date: 2019/6/4 * Time: 15:53 */ include "./ ...
- C#文件路径问题
一丶声明的文件路径 @"/Upload\\" + timeStr + @"\\" + fileName; \\ 中第一个\是转义符 \\表示的是一个字符 即'\ ...
- Labview学习笔记（三）
一.数据 1.数值控件 (1)数值控件 根据不同的模拟状态,放置不同控件 (2)显示格式 为了程序显示,需要设置数值型控件的表示法.数值范围.显示格式等属性. 一般来说,长度越长,则可以表示的数值范围 ...
- Ubuntu 18.04 nvidia driver 390.48 安装 TensorFlow 1.12.0 和 PyTorch 1.0.0 详细教程
最近要在个人台式机上搭建TensorFlow和PyTorch运行环境,期间遇到了一些问题.这里就把解决的过程记录下来,同时也可以作为安装上述环境的过程记录. 如果没有遇到类似的问题,想直接从零安装上述 ...
- NOD 1113矩阵快速幂
基准时间限制:3 秒 空间限制:131072 KB 分值: 40 给出一个N * N的矩阵,其中的元素均为正整数.求这个矩阵的M次方.由于M次方的计算结果太大,只需要输出每个元素Mod (10^ ...
- LMDB installation
Official Website: http://lmdb.readthedocs.io/en/release/ Install commands for Ubuntu: $ sudo apt-get ...
- 关于新世界的大门（新博客地址：BBBob.cf）
更新:BBBob.cf 这个域名已经不用了(但是依旧可以访问),永久域名改为了BBBob.win 新博客地址为BBBob.cf,以后的博客都会在新博客更新,当然在新博客上我也会写得更用心些,不再像这里 ...
- [转]十五天精通WCF——第十二天 说说wcf中的那几种序列化
我们都知道wcf是由信道栈组成的,在我们传输的参数走到传输信道层之前,先需要经过序列化的过程,也就是将参数序列化为message,这篇 我们就来说说这里的序列化,蛮有意思的,可能初学者也明白,在wcf ...