postMessage解决跨域下跨文档通信

postMessage方法可以向另外一个窗口发送消息,

该方法是window下的一个全局方法。用法:

首先找到新窗口的window的对象,然后调用postMessage方法,该方法接受两个参数,第一个参数为数据,第二个参数为打开的新窗口的域(带协议的)。例如:

oMyIframe.contentWindow.postMessage(‘1‘, ‘http://www.b.com‘);

在被打开的新窗口里面,有一个message事件:当窗口接受到通过postMessage传递过来的数据时就会触发该事件!

接受到的数据可以通过ev.data获取到,发送数据的域可以通过ev.origin获取到。例如:

window.addEventListener(‘message‘, function(ev) {

        //ev.data : 发送过来的数据
        //ev.origin
        if (ev.data == ‘?‘) {
            document.body.style.background = ‘red‘;
        }

    }, false);
时间: 2024-12-28 20:17:03

postMessage解决跨域下跨文档通信的相关文章

同域下跨文档通信iframe和window.open

1.iframe标签可以嵌套另一个标签,并且可以通过js去访问被包含的页面的window对象,从而操作该页面下documentElement,如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <s

html5 postMessage解决跨域、跨窗口消息传递

问题: 对于跨域问题,研究了一下html5的postMessage,写了代码测试了一下,感觉html5新功能就是好用啊. 此文仅使用html5的新特性postMessage,演示其执行过程和效果: 方法解释:postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档.多窗口.跨域消息传递.postMessage(data,origin)方法接受两个参数: 1.data:你需要传递的消息,消息传递的格式有一定要求:参数可以是JavaScript的任意基本类型或可

web通信之跨文档通信 postMessage

index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>web通信之跨文档通信</title> <style> iframe {float:left;width:45%; height:200px; bor

Nodejs代理解决开发环境下跨域问题

前后端分离的项目,需要解决开发环境下跨域的问题: 转载链接:https://www.cnblogs.com/ytu2010dt/p/5959899.html 1.安装node环境 2.新建JS文件:nodeProxy.js 代码: "use strict"; const express = require('express'); const path = require('path'); const app = express(); const request = require('r

[HTML5_JS跨域]JavaScript跨域总结与解决办法

什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象.更详细的说明可以看下表: 特别注意两点: 第一,如果是协议和端口造成的跨域问题“前台”是无能为力的, 第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而

[HTML5_WebWorkers]HTML5 web通信(跨文档通信/通道通信)简介

一.简单概要 web通信(洋名:web messaging)是一种文档中独立的浏览上下文间的DOM不会被恶意的跨域脚本暴露数据分享方式. 得得得,术语啊什么的,比看到凤姐还头疼.有必要把上面一句话拆开讲: web通信是一种数据分享方式(有屁话之嫌): 通信的主体是“浏览上下文”(这是纳尼?): 哦,“浏览上下文”呢是“一个将 Document对象呈现给用户的环境”,你可以近似理解为平常我们看到的某个页面所处的环境: web通信不会有DOM被恶意暴露的危险: 目前应用比较多的就是iframe之间的

解决Chrome跨域问题 - 跨域系列

解决Chrome跨域问题 - 跨域系列 团子家族_方糖咖啡 关注 0.3 2018.06.21 17:36* 字数 385 阅读 5951评论 0喜欢 2 解决Chrome跨域问题,首先注意要区分Chrome版本,49之前的版本和49之后的版本处理方法不同.具体如下: Chrome49之后的版本: Windows: 1.关闭所有的chrome浏览器. 2.新建一个chrome快捷方式,右键“属性”,“快捷方式”选项卡里选择“目标”,添加  --args --disable-web-securit

VC++环境下多文档模板应用程序开发(带源码)

我们以前见到的关于VC++环境下利用APP Wizard 自动生成的MDI的应用程序只支持打开同一文档类型的多个文件,但是不能够同时打开不同种类型的文档.网上的这种公开资料比较少,我在知网上查阅了相关的资料.下面我根据这些资料做一下总结(辛辛苦苦一个一个字码出来的). 下面设计一个能够处理两种文档类型的应用程序:第一种文档类型:TXT文档,第二种文档类型:Bub的文档类型. 第一种的文档类型TXT,是利用APP Wizard自动生成的,只不过是在设置的时候将文档类型设置为TXT类型,并且使生成的

能跨域和跨浏览器的flashcookie for jquery插件

对于写网站时需要跨域和跨浏览器的可以看看这个. 引入jquery  和 swfstore.min.js 就可以了,蛮简单好用的,会jquery基础就可以咯. mySwfStore.set('myKey', '值'); //设置flashcookie mySwfStore.get('myKey'); //读取flashcookie 还有清除等命令在例子里,大家可以自己看哦. 跨域只需要把 js代码里的 swf_url 地址设置成绝对地址就可以了. 比如 swf_url=http://www.a.c