(二)文档请求不同源之window.postMessage跨域

摘要:
这个API向窗口对象添加了一个窗口。postMessage方法允许跨窗口通信,无论两个窗口是否同源。Internet Explorer 8+、Chrome、Firefox、Opera和Safari都支持此功能。DOCTYPE html˃窗口。postMessage解决跨域a.html窗口。onload=function(){varsubwin=window.open;//父窗口http://localhost:8080/a.html到子窗口http://localhost:8081/b.html发送消息并调用postMessage方法。Subwin公司。postMessage('我会给你发消息!','http://localhost:8081 ');} 窗addEventListener;发送消息并收听messages=window。父级){return;}Vardata=事件。数据,//消息来源=事件。origin,//消息源地址source=事件。source//如果{console.log;}来源postMessage('我收到了消息!

一、基本原理

HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging)。这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。Internet Explorer 8+, chrome,Firefox , Opera和Safari 都支持这个功能。

二、测试步骤

1、创建a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.postMessage解决跨域a.html</title>
</head>
<body>
<script>
    window.onload = function() {
        var subwin = window.open('http://localhost:8081/b.html', 'title');
        //父窗口http://localhost:8080/a.html向子窗口http://localhost:8081/b.html发消息,调用postMessage方法。
        subwin.postMessage('我要给你发消息了!', 'http://localhost:8081');
    }
    window.addEventListener('message', function(e) {
      console.log('a.html接收到的消息:', e.data);
    });
</script>
</body>
</html>

发送消息,监听消息。

2、创建b.html

<script>
  var messageFunc = function (event) {  
      if(event.source != window.parent) {
        return;
      }
      var data = event.data,//消息  
      origin = event.origin,//消息来源地址  
      source = event.source;//源Window对象  
      if(origin == "http://localhost:8080"){  
        console.log('b.html接收到的消息:', data);
      }  
      source.postMessage('我已经接收到消息了!', origin);
    };  
    if (typeof window.addEventListener != 'undefined') {  
      window.addEventListener('message', messageFunc, false);  
    } else if (typeof window.attachEvent != 'undefined') {  
      window.attachEvent('message', messageFunc);  
    }
</script>

3、打开两个http服务器windowpostmessage跨域

4、打开浏览器就可以看到结果:http://localhost:8080/a.html

免责声明:文章转载自《(二)文档请求不同源之window.postMessage跨域》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Vim 和 Gdb 学习笔记HiveServer下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Electron进程间通信

在说Electron进程通信的时候,先说一下Electron中的两种进程:主进程和渲染进程。 主进程通过创建 BrowserWindow 实例来创建网页。 每一个 BrowserWindow 实例在其渲染过程中运行网页,当一个BrowserWindow 实例被销毁时,对应的渲染过程也会被终止。简单来说,一个客户端就是一个主进程。 渲染进程只能管理相应的网页...

Spring Cloud 配置中心多环境配置bootstrap.yml

https://www.leftso.com/blog/900.html 我们知道spring boot可以通过文件名来区分配置,如下:application.ymlapplication-dev.yml #开发环境application-test.yml #测试环境application-prod.yml #正式环境但是spring cloud用上了配置...

Nginx Rewrite域名及资源重定向

一.正则匹配     1.匹配规则         ^$  标识符匹配后面跟-一个字符串。匹配字符串后将停止对后续的正则表达式进行匹配,如location ^~/images/,在匹配了/images/这个字符串后就停止对后续的正则匹配         =   精准匹配,如location=/,只会匹配url为/的请求         ~   区分大小写的...

js键盘相关知识总结

一、相应事件 keydown:按下键盘上的任意键都可触发,按着不放则重复触发 keypress:按下键盘上的字符键时触发,按着不放则重复触发 keyup:释放按键时触发 事件顺序:keydown>keypress>keypup 在文本框中捕获按键事件需要注意的地方: 1.keydown、keypress是在文本框内容变化前发生,keyup则是在...

win10 mysql5.7忘记密码如何解决

点击开始菜单,搜索cmd.exe,左击以管理员身份运行 操作之前先备份好数据库(切忌) C:UsersAdministrator>cd C:Program FilesMySQLMySQL Server 5.7in C:Program FilesMySQLMySQL Server 5.7in>mysqld --skip-grants-tables...

开发与OP流程规范(git)

概况 当前文档包涵开发流程规范与上线(OP)流程规范。 通过规范开发流程可以严格控制线上分支的代码质量及稳定性。使用成熟的工作流程模型,可以使团队协作更加流畅。 通过规范上线(OP)流程,保证线上环境的稳定,明确职责。 涉及人员 研发工程师 代码审核员(技术负责人或由技术负责人指定的研发工程师,不可以是开发者本人) 产品经理 测试工程师(未到岗前,产...