使用window.postMessage()方法在两个网页间传递数据
目录
- 说明
- 发送端
- postMessage程序
- 发送消息的基本语法：
- targetWindow
- message
- targetOrigin
- transfer
- 接收端
- 完整程序
- 发送程序
- 接收程序
说明
window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。
通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。window.postMessage()提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）。
一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派发MessageEvent。接收窗口随后可根据需要自行处理此事件。传递给window.postMessage()的参数通过事件对象暴露给接收窗口。
发送端
postMessage程序
var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('send');
btn.addEventListener('click', function (e) {
e.preventDefault();
var val = document.getElementById('text').value;
receiver.postMessage("Hello "+val+"！", "http://res.42du.cn");
});
发送消息的基本语法：
targetWindow.postMessage(message, targetOrigin, [transfer]);
targetWindow
targetWindow就是接收消息的窗口的引用。 获得该引用的方法包括：
- Window.open
- Window.opener
- HTMLIFrameElement.contentWindow
- Window.parent
- Window.frames +索引值
message
message就是要发送到目标窗口的消息。 数据使用结构化克隆算法进行序列化。 这意味着我们可以将各种各样的数据对象安全地传递到目标窗口，而无需自己对其进行序列化。
targetOrigin
targetOrigin就是指定目标窗口的来源，必须与消息发送目标相一致，可以是字符串“*”或URI。 *表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。
transfer
transfer是可选参数
接收端
目标窗口通过执行下面的JavaScript来侦听发送过来的消息：
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
if (event.origin !== "http://www.42du.cn")
return;
}
event对象有三个属性，分别是origin，data和source。event.data表示接收到的消息；event.origin表示postMessage的发送来源，包括协议，域名和端口；event.source表示发送消息的窗口对象的引用; 我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。
完整程序
发送程序
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>42度空间-window.postMessage()跨域消息传递</title>
</head>
<body>
<div>
<input id="text" type="text" value="42度空间" />
<button id="send" >发送消息</button>
</div>
<iframe id="receiver" src="http://res.42du.cn/static/html/receiver.html" width="500" height="60">
<p>你的浏览器不支持IFrame。</p>
</iframe>
<script>
window.onload = function() {
var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('send');
btn.addEventListener('click', function (e) {
e.preventDefault();
var val = document.getElementById('text').value;
receiver.postMessage("Hello "+val+"！", "http://res.42du.cn");
});
}
</script>
</body>
</html>
接收程序
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>42度空间-从www.42du.cn接收消息</title>
</head>
<body>
<div id="message">
Hello World!
</div>
<script>
window.onload = function() {
var messageEle = document.getElementById('message');
window.addEventListener('message', function (e) {
alert(e.origin);
if (e.origin !== "http://www.42du.cn") {
return;
}
messageEle.innerHTML = "从"+ e.origin +"收到消息： " + e.data;
});
}
</script>
</body>
</html>
到此这篇关于window.postMessage()实现跨域通讯的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
使用HTML5中postMessage知识点解决Ajax中POST跨域问题
由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等.常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建script: (3) iframe+location.hash: (4) flash. postMessage是HTML5为解决js跨域问题而引入的新的API,允许多个iframe/window跨域通信. HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口
-
JavaScript使用HTML5的window.postMessage实现跨域通信例子
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: 1.document.domain+iframe的设置,应用于主域相同而子域不同: 2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域. window.name 保存数据以及跨域 iframe 静态代理动
-
使用postMessage实现iframe跨域通信的示例代码
1.父页面内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>主页面</h1> <iframe id="child" src="http://10.0.0.159:8080"></i
-
使用window.postMessage()方法在两个网页间传递数据
目录 说明 发送端 postMessage程序 发送消息的基本语法: targetWindow message targetOrigin transfer 接收端 完整程序 发送程序 接收程序 说明 window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在一个页面和它生成的弹出窗口之间,或者是页面和嵌入其中的iframe之间. 通常情况下,不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议,端口号和主机(也称为“同源策略”).window
-
C#使用委托(delegate)实现在两个form之间传递数据的方法
本文实例讲述了C#使用委托(delegate)实现在两个form之间传递数据的方法.分享给大家供大家参考.具体分析如下: 关于Delegate[代理.委托]是C#中一个非常重要的概念,向前可以推演到C++的指针,向后可以延续到匿名方法.lambda表达式. 现在我就从一个最简单最实用的一个小例子出发分析一下Delegate的使用. 现在有两个窗体Form1和Form2. 两个按钮Button1(Form)和Button2(Form2). Form1的代码: private void button
-
vue2.0父子组件间传递数据的方法
关于父子组件之间传递数据其实文档上都说得很明白. 但是如果完全不懂的人做计也看不懂,下面是一个小例子,有两个文件 1.parent.vue <template> <child :child-msg="msg" @ok="event"></child> </template> <script> import child from './child.vue'; export default { data(){
-
Angular事件之不同组件间传递数据的方法
利用Angular Event在不同组件之间传递数据 为了实现在Angular不同Component之间相互传递数据,可以使用Event分发的思路来实现. 使用事件实现在不同组件之前传递数据的思路如下: 定义一个服务,用来实现事件的发布和订阅方法. 组件A注入事件服务的依赖,将自己要传递数据的数据以事件的形式发布出去. 组件B注入事件服务的依赖,并订阅相关事件. 定义一个服务 在终端输入 ng g service event Angular会自动在项目的app目录下生成 event.servic
-
Android 两个Fragment之间传递数据实例详解
Android 两个Fragment之间如何传递数据 FragmentA启动FragmentB,做一些选择操作后,返回FragmentA,需要把FragmentB里面选择的数据传回来.有什么办法? Fragment之间不能直接通信,必须通过Activity来完成,具体步骤. 1. 在FragmentA中定义通信接口,通过该接口向Activity发送数据. public class FragmentA extends Fragment { private onButtonPressListener
-
Vue中iframe 结合 window.postMessage 实现跨域通信
目录 一.前言 二.应用场景 2.1 嵌入页面 2.2 postMessage 实现父子页面通信 2.3 子页面向父页面传值 2.4父页面代码: 一.前言 什么是iframe? iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 什么是postMessage? window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数
-
WinForm中窗体间的数据传递交互的一些方法
实际上过去我也写过类似的主题,这里把各种方法总结一下,内容的确基础了一些,所以这篇文章是写给刚刚学习C#的同行们的,希望对大家有些帮助吧!很抱歉,这篇文章没有诡异的bug来勾起大家的兴趣,但是下篇文章我会努力写些有趣的主题的! 在窗体间传递数据的方法比较多: 1,在子窗体中自定义一个构造函数,参数类型是主窗体,当要显示子窗体的时候,就用这个构造函数来实例化子窗体,然后把this指针传进去,说起来太抽象了,我大概一写大家应该就明白了: 复制代码 代码如下: public class frmMain
-
PHP页面间传递值和保持值的方法
一.目录结构 二.两次页面间传递值 在两次页面之间传递少量数据,可以使用get提交,也可以使用post提交,二者的区别恕不赘述. 1.get提交 使用get提交来传递数据,在链接地址中修改发送到服务器的 URL 如下所示http://www.cnblogs.com/MarkRao/p/php01.html?gName=mark&gAge=26,当然也可以在表单中设置method="get",php中接收get提交过来的数据值,使用预定义$_GET变量 从带有 GET 方法的表单
-
vue2.0 父组件给子组件传递数据的方法
在父组件 App.vue 中引用子组件 A.vue,把 name 的值传给 A 组件. 1.安装 在桌面新建一个文件夹 $ cd 到文件中 $ npm install -g vue-cli $ vue init webpack . $ npm install $ npm run dev vue init webpack . 之后的选择解释 2.删除 1.删除App中的一些内容如下 2.删除components文件中的HelloWorld.vue 3.修改 修改App.vue 如下: <templ
-
window.print打印指定div指定网页指定区域的方法
第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 细如下: <style media=print type="text/css"> .noprint{visibility:hidden} </style> 要打印的内容.哈哈! <p class="noprint">将不打印的代码放在这里.</p> <a href="javascript: