奥门新浦京官方网站使用HTML5中postMessage实现Ajax中的POST跨域问题

奥门新浦京官方网站 ,HTML5中提供了在网页文档之间相互接收与发送信息的功能。使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信。

postMessage 是 HTML5
新方法,它可以实现跨域窗口之间通讯。到目前为止,只有 IE8+, Firefox 3,
Opera 9, Chrome 3和 Safari 4 支持,而本篇文章主要讲述 postMessage 方法与
message 事件跨浏览器实现。

摘要:跨域问题,无论是面试还是平时的工作中,都会遇到,本文总结处理跨域问题的几种方法以及其原理,也让自己搞懂这方面的知识,走起。

浏览器支持程度:IE8+,firefox4+,chrome8+  opera10+

postMessage 方法 JSONP
技术不一样,前者是前端擅长跨域文档数据即时通讯,后者擅长针对跨域服务端数据通讯,postMessage
应用场景能说明这个区别:

 

1.
首先,要想接收从其他的窗口发过来的消息,就必须对窗口对象的message事件进行监听,如下代码:

应用场景举例
1.webOS 使用 iframe 嵌入第三方应用,此时 webOS
与应用需要实时接收/发送各自的消息与响应事件。
2.页面弹出一个由 iframe
层,嵌入第三方提供的图片上传页面,文件上传完毕后需要获取返回图片地址插入到编辑器。
3.iframe 跨域高度自适应。
HTML5 postMessage 方法
postMessage 可以实现跨域文档的消息传输(Cross Document Messaging)。

什么是跨域

  

 
  在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin
Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。

  JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略,在baidu.com下的页面中包含的JavaScript代码,不能访问在google.com域名下的页面内容;甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于,通过XMLHttpRequest实现的Ajax请求,不能向不同的域提交请求,例如,在abc.example.com下的页面,不能向def.example.com提交Ajax请求,等等。

  为什么浏览器要实现同源限制?我们举例说明:

  比如一个黑客,他利用iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过javascript读取到你的表单中输入的内容,这样用户名和密码就轻松到手了.

  又比如你登录了OSC,同时浏览了恶意网站,如果没有同源限制,该恶意
网站就可以构造AJAX请求频繁在OSC发广告帖.

 

跨域的情况分为以下几种:

  奥门新浦京官方网站 1

  特别注意两点:

  1、如果是协议和端口造成的跨域问题“前台”是无能为力的

  2、在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。比如上面的,

“URL的首部”指window.location.protocol
+window.location.host。其中,

  window.location.protocol:指含有URL第一部分的字符串,如http:

 
  window.location.host:指包含有URL中主机名:端口号部分的字符串.如//www.cenpok.net/server/

 

window.addEventListener(“message”, function(){},false);

向外界窗口发送消息:

常用的几种跨域处理方法:

 

 1、JSONP

 2、CORS策略

 3、document.domain+iframe的设置

 4、HTML5的postMessage

 5、使用window.name来进行跨域

 

2.
其次,需要使用window对象的postMessage方法向其他窗口发送消息,该方法定义如下所示:

1 otherWindow.postMessage(message, targetOrigin);
otherWindow: 指目标窗口,是 window.frames 属性的成员或者由 window.open
方法创建的窗口

跨域的原理解析及实现方法

 

otherWindow.postMessage(message, targetOrigin);

参数说明:

1、JSONP(JSON with padding)

原理 :

     
我们知道,在页面上有三种资源是可以与页面本身不同源的。它们是:js脚本,css样式文件,图片,像淘宝等大型网站,肯定会将这些静态资源放入cdn中,然后在页面上连

接,如下所示,所以它们是可以链接访问到不同源的资源的。

1)<script
type=”text/javascript” src=”某某cdn地址” ></script>

2)<link
type=”text/css” rel=”stylesheet” href=”某个cdn地址” />

3)<img
src=”某个cdn地址” alt=””/>

  而jsonp就是利用了script标签的src属性是没有跨域的限制的,从而达到跨域访问的目的。因此它的最基本原理就是:动态添加一个<script>标签来实现。

 

实现方法:

   
这里是使用ajax来请求的,看起来和ajax没啥区别,其实还是有区别的。

   
ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

$.ajax({  
        url:"http://crossdomain.com/services.php",  
        dataType:'jsonp',  
        data:'',  
        jsonp:'callback',  
        success:function(result) {  
            // some code
        }  
    });  

上面的代码中,callback是必须的,callback是什么值要跟后台拿。获取到的jsonp数据格式如下:

flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

jsonp的全称为json with
padding,上面的数据中,flightHandler就是那个padding.

 

 JSONP的不足之处:

  1、只能使用get方法,不能使用post方法:

  我们知道 script,link,
img 等等标签引入外部资源,都是 get 请求的,那么就决定了 jsonp 一定是 get
的。但有时候我们使用的 post
请求也成功,为啥呢?这是因为当我们指定dataType:’jsonp’,不论你指定:type:”post”
或者type:”get”,其实质上进行的都是 get 请求!

  2、没有关于 JSONP
调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到
404
错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。

 

该方法使用2个参数,第一个参数为所发送的消息文本,但也可以是任何javascript对象,第二个参数是接收消息的对象窗口的url地址(比如:http:127.0.0.1:8080/)
, 但是我们也可以在url地址字符串中使用通配符”*”,
指定全部的域下,但是我们还是建议使用特定的域名下,otherWindow为要发送窗口对象的引用。

message: 是要发送的消息,类型为 String、Object (IE8、9 不支持)
targetOrigin: 是限定消息接收范围,不限制请使用 ‘*’
HTML5 message 事件
绑定消息事件:

 2、CORS策略

 原理:

   
 CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource
sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.

  CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。
它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全。

 

实现方法:

  CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

  整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

   

前端方面

以前我们使用Ajax,代码类似于如下的方式:

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "/hfahe", true); 
xhr.send(); 
// 这里的“/hfahe”是本域的相对路径。

如果我们要使用CORS,相关Ajax代码可能如下所示:

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "http://blog.csdn.net/hfahe", true); 
xhr.send(); 
// 请注意,代码与之前的区别就在于相对路径换成了其他域的绝对路径,也就是你要跨域访问的接口地址。

 

服务器方面
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

 

CORS策略的优缺点:

  优点:

    1、CORS支持所有类型的HTTP请求。

    2、
使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。

  缺点: 兼容性方面相对差一点,ie10或以上才支持

 

Demo演示:

 代码如下

3、document.domain+iframe的设置  **(只有在主域相同的时候才能使用该方法)**

原理:

  浏览器中不同域的框架之间是不能进行js的交互操作的。但是不同的框架之间(父子或同辈),是能够获取到彼此的window对象的,但是,我们也只能获取到一个几乎

无用的window对象。比如,有一个页面,它的地址是
, 在这个页面里面有一个iframe,它的src是
, 很显然,这

个页面与它里面的iframe框架是不同域的,所以我们是无法通过在页面中书写js代码来获取iframe中的东西的。

  这个时候,document.domain就可以派上用场了,我们只要把
和 
这两个页面的document.domain都设成

相同的域名就可以了。但要注意的是,document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。例如:

a.b.example.com
中某个文档的document.domain 可以设成a.b.example.com、b.example.com
、example.com中的任意一个,但是不可以设成
c.a.b.example.com,因为这是

当前域的子域,也不可以设成baidu.com,因为主域已经不相同了。

 

使用方法:

  比如在
的页面里要访问

  在页面
中设置document.domain:

//http://www.example.com/a.html
<html>
<head>
    <title>A页面</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <div>A页面</div>
    <iframe id="iframe" src="http://example.com/b.html" style="display:none;"></iframe>
  // 相当于用一个隐藏的iframe来做代理
    <script>
        $(function(){
            try{
                document.domain = "example.com"; //这里将document.domain设置成一样
            }catch(e){}
            $("#iframe").load(function(){
                var iframe = $("#iframe").contentDocument.$;
                ifram.get("http://example.com/接口",function(data){});
            });
        });
    </script>
<body>
</html>

 

在页面

中也设置document.domain,而且这也是必须的,虽然这个文档的domain就是example.com,但是还是必须显示的设置document.domain的值:

//http://example.com/b.html
<html>
<head>
    <title>B页面</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <div>B页面</div>
    <script>        
        $(function(){
            try{
            document.domain = "example.com"; //这里将document.domain设置成一样
            }catch(e){}
        });
    </script>
</body>
</html>

  这里有个注意点,就是在A页面中,要等iframe标签完成加载B页面之后,再取iframe对象的contentDocument,否则如果B页面没有被iframe完全加载,在A页面中通过contentDocument属性就取不到B页面中的jQuery对象。

     
一旦取到B页面中的jQuery对象,就可以直接发ajax请求了,这种类似“代理”方式可以解决主子域的跨域问题。

缺点:

  只有在主域相同的时候才能使用该方法

假如现在我在hosts文件下 ,绑定2 个域名如下:

复制代码

4、HTML5的postMessage

原理:

  没啥原理,就是一个html5所提供的一个API.—>HTML5
window.postMessage是一个安全的、基于事件的消息API。

 

  在需要发送消息的源窗口调用postMessage方法即可发送消息。其中.源窗口可以是全局的window对象,也可以是以下类型的窗口:

  1、文档窗口中的iframe:

var iframe = document.getElementById('my-iframe');
var win = iframe.documentWindow;

  2、JavaScript打开的弹窗:

var win = window.open();

  3、当前文档窗口的父窗口:

var win = window.parent;

  4、

var win = window.opener();

 

     
发送消息:
找到源window对象后,即可调用postMessage
API向目标窗口发送消息:

win.postMessage(msg, targetOrigin);

说明:postMessage函数接收两个参数:

  1、msg,
将要发送的消息,可以使一切javascript参数,如字符串,数字,对象,数组等。

  2、targetOrigin,这个参数称作“目标域”,注意,是目标域不是本域!比如,你想在2.com的网页上往1.com网页上传消息,那么这个参数就是“

 

   
接收消息:
那目标窗口要怎么接收传过来的数据呢,只要监听window的message事件就可以接收了。

var onmessage = function (event) {
    var data = event.data;
    var origin = event.origin;
    //do someing
};
if (typeof window.addEventListener != 'undefined') {
    window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
    //for ie
    window.attachEvent('onmessage', onmessage);
}

message事件监听函数接收一个参数,Event对象实例,该对象有三个属性:

  • data : 消息
  • origin:消息的来源地址
  • source:发送消息窗口的window对象引用

 

使用方法(案例):

  ;
发送消息的页面

<!-- 这个是 http://test.com/index.html 页面 -->

 <div>
    <!-- 要给下面的页面传一个妹子过去 -->
    <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>  
</div>
<script type="text/javascript">
    window.onload=function(){
        window.frames[0].postMessage('苍老师','http://lslib.com');
    }
</script>

 

–> 接收消息的页面

<!-- 这个是 http://lslib.com/lslib.html 页面 -->
<script type="text/javascript">
    window.addEventListener('message',function  (e) {
        console.log(e.origin,e.data);
        alert('收到妹子一枚:'+e.data);
    });
</script>

 

优缺点:

 优点:方便,安全,有效的解决了跨域问题

 缺点:万恶的资本主义,ie8+才支持,而且ie8+<ie10只支持iframe的方式。

 

127.0.0.1       abc.example.com

window.addEventListener(‘message’, receiver, false);
function receiver (event) {
  if (event.origin === ”) {
    if (event.data === ‘Hello world’) {
      event.source.postMessage(‘Hello’, event.origin);
    } else {
      alert(event.data);
    };
  };
};

 5、使用window.name来进行跨域(相对比较完美的方法)

 原理:  

  当iframe的页面跳到其他地址时,其window.name值保持不变,并且可以支持非常长的
name 值(2MB)。

  浏览器跨域iframe禁止互相调用/传值.但是调用iframe时
window.name
却不变,正是利用这个特性来互相传值,当然跨域下是不容许读取ifram的window.name值.

     
 所以这里我们还要准备一个和主页面
相同域下的代理页面 ,iframe调用子页面

 

使用方法:

 1、 准备三个页面:

  
  //应用页面

  
   // 代理页面,要求和应用页面在同一个域。一般是一个空的html

     
 
//应用页面获取数据的页面,简称:数据页面

    2、

   
 数据页面将数据传到window.name中去。如下:

   
  data.html

// data.html
window.name="苍老师";  //可以是其他类型的数据,比如数组,对象等等

   

   
  //应用页面的代码如下:

<!-- main.html -->
var iframeData;

var state = 0;//开关变量

var iframe = document.createElement('iframe'); //创建iframe

var loadfn = function() {

    if (state === 1) {

        iframeData = iframe.contentWindow.name;  // 读取数据

        alert('获取到了iframe传过来的妹子'+iframeData);

    }else if (state === 0) {

         state = 1;
         iframe.contentWindow.location = 'http://www.a.com/other.html';  //这里是代理页面 other.html

         /**
             这里说明一下:
             由于iframe的location改变了,相当于重新载入页面(这是iframe的性质决定的),于是重新执行loadfn方法。
        由于当iframe的页面跳到其他地址时,其window.name值保持不变,并且此时开关变量 state已经变为1,
             于是就可以获取到window.name值,也就达到了跨域访问的目的了。

        **/

    };
}
iframe.src = 'http://www.b.com/data.html'; //这是是数据页面,data.html

if (iframe.attachEvent) {

    iframe.attachEvent('onload', loadfn);

} else {

    iframe.onload  = loadfn;
}
document.body.appendChild(iframe);

 

3、获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame
js访问)。

    iframe.contentWindow.document.write('');
    iframe.contentWindow.close();
    document.body.removeChild(iframe);

 

优缺点:

  浏览器支持情况好,是比较普遍的使用方法

 

 

127.0.0.1        longen.example.com

回调函数第一个参数接收 Event 对象,有三个常用属性:

总结

 

以上总结了js跨域的几种方法,当然还有其他的方法,不过没有。他们各有千秋。其实最主要的区别除了实现方式不一样,主要是浏览器的兼容问题而已。

 

JSONP:

     
 JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

     
JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

 

CORS策略

  优点:使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。

 

   
 缺点:古老的浏览器不支持,不过大部分现代浏览器都支持

 

document.domain+iframe:只适用于主域相同的跨域问题处理

 

html5的postMessage:

  优点html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。如果是现代浏览器,首选。

  缺点:
ie8以前不支持

 

window.name:

  主要是应用当frame的页面跳到其他地址时,其window.name值保持不变的原理。兼容性好。需要照顾落后的浏览器时,首选。、

 

小小总结,有误之处,欢迎指出

 

现在假如在abc.example.com域下有一个abc.html页面,在longen.example.com域下有def.html页面,现在我是希望这2个不同域名下的页面能互相通信,abc.html代码如下:

data: 消息
origin: 消息来源地址
source: 源 DOMWindow 对象
message 事件在低版本浏览器下模拟实现
对于支持 postMessage 方法的浏览器直接使用它;而对于 IE6、7
采用了比较成熟的 window.name 保存数据以及跨域 iframe
静态代理动态传输方案,下面简称 Cross Frame。

<form>  
      <p>  
        <label for="message" style="color:red;font-size:24px;">给iframe子窗口发一个信息:</label>  
        <input type="text" name="message" value="send" id="message" />  
        <input type="submit" value="submit" id="submit"/>  
      </p>  
</form>  
<h4>目标iframe传来的信息:</h4>  
<p id="test">暂无信息</p> 

 <iframe id="iframe"  
    src="http://longen.example.com/webSocket/def.html" style="display:none"></iframe>

Cross Frame

JS代码如下:

假设在域 www.a.com 上有页面 a.html 和代理页面 proxy-a.html , 另一个域
www.b.com 上有个页面 b.html 和代理页面 proxy-b.html,a.html 需要向
b.html 中发送消息时,页面会创建一个隐藏的 iframe 指向 proxy-b.html
,并把消息赋予 iframe.name 属性,此时 proxy-b.html 可以通过 window.name
获取到消息,由于 proxy-b.html 与 b.html 是同域,proxy-b.html
可以把消息赋予 b.html。 b.html 要给 a.html 发送消息时,原理一样。

var win = document.getElementById("iframe").contentWindow;

document.getElementById("submit").onclick = function(e){
    e.preventDefault();
    win.postMessage(document.getElementById("message").value,"http://longen.example.com"); 
}  

window.addEventListener("message",function(e){
     e.preventDefault();
     document.getElementById("test").innerHTML = "从" + e.origin + "那里传过来的消息:n" + e.data;
},false);

自动捕获代理 URL

Def.html代码如下:

在 Cross Frame 方案中,通信双方必须确切的知道静态代理文件的
URL,显然这个极大的限制了应用范围,我们可以通过一些约定改善:静态代理文件必须置于通信页面所在域根目录,且文件名必须保持一致,如
messageEvent-proxy.html。

HTML代码:

有了上述约定,接下来可以用一些巧妙的方法让双方自动捕获代理 URL。以
通过 iframe 嵌入
保持数据交换为例进行说明:

<form>  
      <p>  
        <label for="message">给父窗口abc.html发个信息:</label>  
        <input type="text" name="message" value="send" id="message" />  
        <input type="submit" />  
      </p>  
 </form>  
 <p id="test2">暂无信息。</p>

b.html 的静态代理路径可以通过正则分析 iframe.src 后得知;而从框架 b.html
内获取父页面就比较麻烦了,因为跨域后的 parent.location.href
属性只可写入不可读取,不过还可以借用 document.referrer
属性来分析来路地址得知父页面 url。document.referrer
是一个不稳定的属性,我们可以利用 iframe 中 window.name
刷新也不会变化的特性,用此来保存父页面 a.html 的地址。

JS代码如下:

持续跟踪 URL

var parentwin = window.parent; 
window.addEventListener("message",function(e){
       document.getElementById("test2").innerHTML = "从父窗口传来的域" +e.origin + ",和内容数据:" + e.data;  
       parentwin.postMessage('HI!你给我发了"'+e.data+'"。',"http://abc.example.com");
},false);

a.html 第一次通过提取 iframe.src 路径可得知 b.html 的地址,假若 b.html
跳转到其他域名的时候,此时就会失去对 iframe 内静态代理的联络。
好在新页面由于能够获取父页面 a.html 保存在 window.name
的静态代理,所以我们可以在新页面初始化的时候向 a.html
传递消息告诉它新的地址,这样就能持续跟踪 iframe 中的 URL。

当我点击abc.html页面后,可以看到效果如下,从def.html返回内容了。如下:

开源事件库 messageEvent.js
“messageEvent.js”是针对上述方案封装的 message 事件与 postMessage
方法库,它让各个浏览器之间 message 的 Event 对象成员属性统一,event.data
属性能传递多达 2MB 的文本信息,并且能让 IE6-9
浏览器像其他现代浏览一样支持 Object 类型数据进行传递
(内部使用深拷贝方式)。

奥门新浦京官方网站 2

若应用双方页面都采用 messageEvent.js,即可轻松实现跨域通信。

我们需要知道如下几条信息:

接口

  1. 通过对window对象的message事件进行监听,可以接收消息。
  2. 通过访问message事件的origin属性,可以获取消息的发送源。
  3. 通过访问message事件的data属性,可以取得消息内容。
  4. 使用postMessage方法发送消息。
  5. 通过访问message事件的source属性,可以获取消息发送源的窗口对象(准确的说,应该是窗口的代理对象)。

add(callback) 添加 message 事件
remove(callback) 卸载 message 事件
postMessage(otherWindow, message, targetOrigin) 向外部窗口发送消息
通过 jQuery 使用它

有了上面的基本知识点,我们可以延伸为实现ajax POST跨域的问题。

jQuery 是一个应用比较广泛的 DOM
库,它的事件机制非常强大而精妙,可以实现自定义事件。若页面引用了
jQuery, messageEvent.js 会为为它提供支持,你可以用熟悉的jQuery api
风格编程,如:

二:使用postMessage 知识点解决 ajax中POST跨域问题。

 代码如下

原理:原理也很简单,假如我们的域名abc.example.com下的abc.html页面需要发ajax请求(跨域,域名为longen.example.com)下,那么我们还是先跨页面文档的形式,和上面一样,我们可以现在longen.example.com下
建立一个页面,比如叫def.html. 那么我们现在还是在 abc.html
页面嵌入一个隐藏域iframe
src路径指向longen.example.com域下def,html页面。过程还是和跨文档类似,只是现在在def.html页面中
在window.onmessage 事件内写ajax请求即可,如下代码:

复制代码

abc.example.com下的abc.html页面如下:

jQuery(window).bind(‘message’, function (event) {
      alert(event.data)
});

html代码和上面一样,下面是JS代码:

jQuery(window).message(function (event) {
      alert(event.data)
});

var win = document.getElementById("iframe").contentWindow;

document.getElementById("submit").onclick = function(e){
      e.preventDefault();
      win.postMessage(document.getElementById("message").value,"http://longen.example.com/"); 
}  

window.addEventListener("message",function(e){
    e.preventDefault();
    alert(typeof e.data)
    var json = JSON.parse(e.data);
     console.log(json);
    alert(json.url)
},false);

jQuery.postMessage(iframe.contentWindow, ‘hello world’, ‘*’);

def.html代码如下:

jQuery(window).unbind(‘message’);

JS代码如下:

由于 jQuery 把包装后的 Event 对象用 data 属性来保存 bind
方法传入的额外数据,导致与 message 事件自身的 event.data
属性冲突——这是一个设计错误。为了让 message 事件能够正确获取
event.data,messageEvent.js 通过操作 jQuery 底层缓存强制覆盖了 bind
方法传入的附加数据 (只针对 message 类型)。当然,我仍然期待 jQuery
未来版本能够取消掉 bind 方法的鸡肋特性。

//获取跨域数据  
window.onmessage = function(e){  
     $.ajax({
          url: 'http://longen.example.com/webSocket/test.php',
          type:'POST',
          dataType:'text',
          //data: {msg:e.data},
          success: function(res) {
               var parentwin = window.parent;  
               parentwin.postMessage(res,"http://abc.example.com");//跨域发送数据  
          }
      });
 };

是 HTML5
新方法,它可以实现跨域窗口之间通讯。到目前为止,只有 IE8+, Firefox 3,
Opera 9, Chrome 3和 Safari 4 支持,而本篇文章主要讲述…

test.php代码如下:

<?php 
    $data=array(  
     url =>1,
      name =>'2',
      'xx-xx'=>"xx"
 );
 echo json_encode($data);
?>

如上实现方式 就可以实现ajax post跨域了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注