PostMessage 跨域

参考:http://www.ibm.com/developerworks/cn/web/1301_jiangjj_html5message/

Test 2  send  to    Test 1

Test 1:

<iframe src="http://10.3.255.203:8080"></iframe>
<script>
function receiveMessage(e) {
alert(e.data);
}
window.addEventListener("message", receiveMessage, false);
</script>

Test 2:

<input type="text" value="send" id="input" />
<input type="button" value="send" id="button" />
<script>
document.getElementById(‘button‘).onclick = function () {
top.postMessage(document.getElementById(‘input‘).value, ‘*‘);
};
</script>

Test1  send to   Test2

Test1

<iframe id="frame" src="test2.html"></iframe>

    <input type="text" value="send" id="input" />

    <input type="button" value="send" id="button" />

    <script>

      document.getElementById(‘button‘).onclick = function () {

          window.frames[0].postMessage(document.getElementById(‘input‘).value, ‘*‘);

      };

    </script>

Test2

<script>

      function receiveMessage(e) {

        alert(e.data);

      }

      window.addEventListener("message", receiveMessage, false);

    </script>

时间: 2024-10-05 19:54:31

PostMessage 跨域的相关文章

HTML5 postMessage 跨域交换数据

前言 之前简单讲解了利用script标签(jsonp)以及iframe标签(window.name.location.hash)来跨域交换数据,今天我们来学习一下HTML5的api,利用postMessage来跨域交换数据.和前面一些方式交换数据方式不同的是,利用postMessage不能和服务端交换数据,只能在两个窗口(iframe)之间交换数据,废话不多说,我们直接进入实战. 实战postMessage overview 上文中说,postMessage是用于两个窗口(iframe)之间交换

js Postmessage 跨域传输数据的简单应用

www.test.com <?php @ini_set('default_charset', 'utf-8'); ?> <input type="text" value="send" id="input" /> <input type="button" value="send" id="button" /> <script type="

[HTML5_WebWorkers]利用HTML5的window.postMessage实现跨域通信

由于同源策略的限制,JavaScript跨域的问题,一直是一个颇为棘手的问题,为了解决js的跨域,web开发人员是煞费苦心,研究了各种跨域方案,如果有机会的话,明河以后会一一展示给各位,今天明河重点介绍下html5新引入的postMessage跨域方案. 1.哪些场景要考虑跨域问题? 明河这二周在处理淘宝添加收藏夹的重构,里面就有一个非常经典的跨域问题.添加收藏弹出层外层是淘宝商城页面域名是tmall.com,而弹出层内部的页面域名却是taobao.com,接下来的问题就是我现在希望弹出层内部的

HTML5:使用postMessage实现Ajax跨域请求

HTML5:使用postMessage实现Ajax跨域请求 由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等. 常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建script: (3) iframe+location.hash: (4) flash. 这里不细说这几种方法,记录的是HTML5的window.postMessage.postMessage兼容IE8+.Firefox.Opera.Saf

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

在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.html页面引入B.html页面,下面看看A.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head>

快速入门各种跨域

前言因为学习跨域需要配置本地服务器,可能会比较麻烦,所以自己根据网上的博客写了大多数跨域的简单demo,可以自己在`本地运行`,而且`不用配置服务器`.自己对于跨域的理解刚开始也仅仅在于网上的博客文章,通过写这些可以本地运行的demo让我对跨域有了更直面的理解,希望这些demo对你们有帮助,有错误的话欢迎指正,欢迎PR. github地址: https://github.com/FatDong1/cross-domain 多种跨域demo CROS跨域 JSONP跨域 postMessage跨域

前端跨域的那些事

这一节,我们来讲一讲,前端跨域的那些事,主要分成这样的几部分来讲解, 一.为什么要跨域? 二.常见的几种跨域与使用场景 2.1 JSONP跨域 2.2 iframe跨域 2.3 window.name 跨域 2.4 document.domain 跨域 2.5 cookie跨域 2.6 postMessage跨域 三.总结 一.为什么要跨域 跨域,通常情况下是说在两个不通过的域名下面无法进行正常的通信,或者说是无法获取其他域名下面的数据,这个主要的原因是,浏览器出于安全问题的考虑,采用了同源策略

前端常见跨域解决方案(全)

什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>.<img>.<frame>等dom标签,还有样式中background:url().@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求.dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场

前端常见跨域解决方案

什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入:<link>.<script>.<img>.<frame>等dom标签,还有样式中background:url().@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求.dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景