跨域消息通信

时间:2022-08-28 17:15:00

虚拟主机的相关设置(本地绑定两个不同的域名)

参看:http://blog.csdn.net/u013162144/article/details/41310691

 

A、1.窗口间通信的两种方式——同域下:

一.iframe

oMyIframe.contentWindow -> 被iframe包含的页面的window对象(如:oMyIframe.contentWindow.document.body.style.background = 'red';)

二.Window.open()  

window.open 有一个返回值,返回被打开窗口的window对象

2.不同域(即跨域):

i. //当本页面和包含页面不在同一个域名下的时候,下面这样的操作就会有跨域操作安全限制问题

oMyIframe.contentWindow.document.body.style.background = 'red';)

解决方法:HTML5中的postMessage对象接收消息的窗口对象.postMessage()

一参 : 发送的数据,二参:接收的域

例如:

www.a.com:

oMyIframe.contentWindow.postMessage('1', 'http://www.b.com');

www.b.com:

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

if (ev.data == '1') {

document.body.style.background = 'red';

}

}, false);

 

B、Ajax Level2(以前ajax不支持跨域,现在可以了)

在标准浏览器下,XMLHttpRequest对象已经是升级版本,支持了更多的特性,可以跨域了但是,如果想实现跨域请求,还需要后端的相关配合才可以

www.a.com:

oBtn.onclick = function() {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

alert(xhr.responseText);

}

}

}

xhr.open('get', 'http://www.b.com/ajax.php', true);

xhr.send();

}

www.b.com中的php:

<?php

header('Access-Control-Allow-Origin:http://www.a.com'); //这是允许访问该资源的域

echo 'hello';


IE如果想实现跨域请求,则需要使用另外一个对象去实现:XDomainRequest 


var oXDomainRequest = new XDomainRequest();
oXDomainRequest.onload = function() {  //没有onreadystatechange事件
alert(this.responseText);
}
oXDomainRequest.open('get', 'http://www.b.com/ajax.php', true);
oXDomainRequest.send();

 

C、websocket

参看:http://blog.csdn.net/u013162144/article/details/41357721