七种跨域方法【5.window.postMessage篇】

原创 2017年01月03日 10:47:00
问题描述:
本地http://localhost/data.html
向异域http://www.lamport.me/data2.html获取数据
如果该文件不能访问,你可以在自己的wamp中配置一个虚拟主机进行访问
虚拟主机的配置地址:
http://blog.csdn.net/super_yang_android/article/details/53991982
http://localhost/data.html代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.postMessage</title>
    <script>
        /*
        * window.postMessage是html5中的方法
        * */
        window.onload = function () {
            var oInput = document.getElementById('input1');
            var oButton = document.getElementById('btn1');
            oButton.onclick = function () {
                var data = oInput.value;
                window.frames[0].postMessage(data, '*');
            }
        }
    </script>
</head>
<body>
<iframe src="http://www.lamport.me/data2.html" style="display:none" frameborder="0"></iframe>
<input type="text" id="input1" value="你好,地球,我来自黑暗星球">
<button id="btn1">点击我通过iframe框架向http://www.lamport.me/data2.html页面发送并返回数据</button>
</body>
</html>
异域http://www.lamport.me/data2.html代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.postMessage</title>
    <script>
        window.onmessage = function(e) {
            e = e || event;
            alert('我接受到来自外太空的数据:' + e.data);
        }
    </script>
</head>
<body>

</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

window.postMessage实现跨域通信

# window.postMessage 1.html5最常用的API之一,实现两个不同域窗口对象之间的数据通信。 2.在发送数据窗口执行:otherWindow.postMessage(msg,or...
  • Szu_AKer
  • Szu_AKer
  • 2016年08月25日 15:21
  • 4661

使用window.postMessage实现跨域通信

JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同; 利用iframe和loca...
  • hr541659660
  • hr541659660
  • 2016年06月28日 19:19
  • 5170

SendMessage、PostMessage原理

本文讲解SendMessage、PostMessage两个函数的实现原理,分为三个步骤进行讲解,分别适合初级、中级、高级程序员进行理解,三个步骤分别为: 1、SendMessage、PostMessa...
  • xringm
  • xringm
  • 2016年09月14日 10:17
  • 1859

SendMessage和PostMessage及Windows消息机制简介

SendMessage PostMessage
  • CSDNMicrosoftCSDN
  • CSDNMicrosoftCSDN
  • 2014年06月27日 14:00
  • 3354

HTML5-postMessage实现跨域

HTML5-postMessage实现跨域对于使用H5实现跨域,很多人都一直处于半懂状态。知道使用postMessage发送消息,使用onMessage接受消息,但是到底哪个方法应该用window调用...
  • qiqingjin
  • qiqingjin
  • 2016年05月05日 20:35
  • 2071

html5的postmessage实现js前端跨域访问及调用解决方案

关于跨域访问,使用JSONP的方法,我前面已经demo过了,具体见http://supercharles888.blog.51cto.com/609344/856886,HTML5提供了一个非常强大的...
  • fuxiaohui
  • fuxiaohui
  • 2014年06月16日 14:35
  • 9824

浅谈localStorage跨域的解决方案——postMessage和iframe

postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信,可以实现跨文本档、多窗口、跨域消息传递。接受两个参数: ① data:要传递的数据,html5规范中提到该...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月10日 21:59
  • 4760

用postMessage实现跨域通信

出于要打造一个各个web应用间能够相互联系的生态系统的目标,则需要一种在各个窗口间安全发送消息的方式,利用postMessage()开发正是这样一种方式。 曾经很长一段时间以来,只有遵守相同协议,...
  • kuzuozhou
  • kuzuozhou
  • 2014年04月10日 19:58
  • 1754

Javascript使用postMessage对iframe跨域通信

今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子:共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现...
  • zsjangel
  • zsjangel
  • 2016年07月30日 23:30
  • 2502

知识点:window.postMessage

window.postMessage() 方法可以安全的进行跨域、跨页面通信。 window.postMessage() 需要在页面加载完毕后才能进行跨域通信,但是我们无法检测目标页面的onload...
  • crystal6918
  • crystal6918
  • 2017年03月13日 20:57
  • 798
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:七种跨域方法【5.window.postMessage篇】
举报原因:
原因补充:

(最多只允许输入30个字)