同源通信

执行它们的页面位于具有相同的协议（http/https），端口（80/443），主机(通常为域名) 时，这两个脚本才能相互通信

大多数情况下，网站就是内部的域名，所以是同源通信，可以相互访问

非同源通信

不同域名，不同窗口，内嵌iframe（可能是外部域名地址） 这种就是非同源通信，

window.postMessage() 方法可以安全地实现跨源通信

来自H5 api，没想到吧，h5还有个这样的方法*.*

语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

  1. otherWindow 其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

  2. message 将要发送到其他 window的数据,字符串，数字等 javascript 基本类型以及对象

  3. targetOrigin 通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口

用法

  1. 发送数据
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="color" onchange="setMessage(this.value)">

<iframe id ='iframe' src="good.html"></iframe>

<script>

    // 发送消息

    var domain = 'http://localhost:63342';

    var iframe =  document.getElementById('iframe').contentWindow;

    var setMessage = function (color){

        iframe.postMessage(color,domain);

    }

    window.addEventListener('message',function(event){

        if(event.origin !== domain) return

        console.log('main receive ' + event.data);

    })

</script>

</body>

</html>
  1. 监听事件，处理消息
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>good</title>

</head>

<body>

<h1 style="text-align: center;color: black;">看我在便颜色</h1>

</body>

<script>

    // 响应消息

    window.addEventListener('message',function(event){

        if(event.origin !== 'http://localhost:63342') return;

        document.body.style.backgroundColor = event.data;

        document.body.innerHTML = event.data;

        event.source.postMessage('good idea ',event.origin);

    },false);

</script>

</html>

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 2019/05/16 16:02

window.postMessage 跨窗口，跨iframe javascript 通信的更多相关文章

  1. WPF 程序如何跨窗口/跨进程设置控件焦点

    原文:WPF 程序如何跨窗口/跨进程设置控件焦点 WPF 程序提供了 Focus 方法和 TraversalRequest 来在 WPF 焦点范围内转移焦点.但如果 WPF 窗口中嵌入了其他框架的 U ...

  2. JavaScript 跨域：window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  3. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  4. 【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  5. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  6. js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)

    一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限 ...

  7. 跨域通信--Window.postMessage()

    一.跨源通信概述 源:协议.端口号(https默认值433).主机域名(document.domain) 作用:向目标窗口派发MessageEvent消息(四个属性) 兼容参考 MessageEven ...

  8. window.postMessage()实现(iframe嵌套页面)跨域消息传递

    window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在页面和嵌入其中的iframe之间. 不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议 ...

  9. html5 postMessage解决iframe跨协议跨域通信问题

    a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName 1.a.html 监听消息 window.addEventLis ...

随机推荐

  1. K2 BPM_采购端到端解决方案，激活合规采购新动能_十年专注业务流程管理系统

    「方案背景」企业管理标准化演进之路 企业的成长离不开标准化,企业的可持续发展更离不开标准化.随着市场竞争的日趋激烈,标准化已经成为企业参与市场竞争的战略性手段,也成为企业可持续发展的重要手段.聚焦到采 ...

  2. 多线程之NSOperation简介

    在iOS开发中,为了提升用户体验,我们通常会将操作耗时的操作放在主线程之外的线程进行处理.对于正常的简单操作,我们更多的是选择代码更少的GCD,让我们专注于自己的业务逻辑开发.NSOperation在 ...

  3. HTML5 使用localstorage 本地存储

    HTML 本地存储介绍 最早的 Cookies 自然是大家都知道,问题主要就是太小,大概也就 4KB 的样子,而且 IE6 只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还 ...

  4. nginx日志文件的配置

    文章来源 运维公会: nginx日志文件的配置 1.日志介绍 nginx有两种日志,一种是访问日志,一种是错误日志. 访问日志中记录的是客户端对服务器的所有请求. 错误日志中记录的是在访问过程中,因为 ...

  5. frp服务搭建

    安装命令 C wget --no-check-certificate https://raw.githubusercontent.com/clangcn/onekey-install-shell/ma ...

  6. k8s的pod

    一.Pod的分类 自主式Pod : 控制器管理的Pod:Kubernetes使用更高级的称为Controller的抽象层,来管理Pod实例.每个Pod都有一个特殊的被称为“根容器”的Pause容器. ...

  7. Java stackoverflowerror异常与outofmemoryerror异常区别

    1.stackoverflow: 每当java程序启动一个新的线程时,java虚拟机会为他分配一个栈,java栈以帧为单位保持线程运行状态:当线程调用一个方法是,jvm压入一个新的栈帧到这个线程的栈中 ...

  8. Java中list在循环中删除元素的坑

    JAVA中循环遍历list有三种方式for循环.增强for循环(也就是常说的foreach循环).iterator遍历. 1.for循环遍历list for(int i=0;i<list.siz ...

  9. 在 windows 上安装 git 2.22

    下载 by win 下载地址:https://git-scm.com/download/win 如下图.选择对应的版本下载: 安装 by win 1.双击下载好的git安装包.弹出提示框.如下图: 2 ...

  10. Django REST framework+Vue 打造生鲜电商项目（笔记五）

    一.viewsets实现商品详情页接口 (1)商品详情页只需要多继承一个类(mixins.RetrieveModelMixin)就可以了,(它的功能就是展示商品详情) class GoodsListV ...