document.domain = 'a.com'; var ifr = document.createElement('iframe'); ifr.src = 'http://script.a.com/b.html'; ifr.style.display = 'none'; document.body.appendChild(ifr); ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; // 在这里操纵b.html alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue); };
script.a.com上的b.html
document.domain = 'a.com';
4.跨域资源共享（CORS）
原理:跨源资源共享(CORS)定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。它是通过客户端+服务端协作声明的方式来确保请求安全的。服务端会在HTTP请求头中增加一系列HTTP请求参数(例如Access-Control-Allow-Origin等)，来限制哪些域的请求和哪些请求类型可以接受，而客户端在发起请求时必须声明自己的源(Orgin)，否则服务器将不予处理，如果客户端不作声明，请求甚至会被浏览器直接拦截都到不了服务端。服务端收到HTTP请求后会进行域的比较，只有同域的请求才会处理。
pageA()代码如下：
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState === 4 && xhr.status === 200){ console.log(xhr.responseText); } }; xhr.open("get","http://www.jesse.com/data.php"); xhr.send(null);
pageB()代码如下：
<?php header("Access-Control-Allow-Origin: ");//与简单的请求相同 header("Access-Control-Allow-Methods: GET, POST");//允许请求的方法 header("Access-Control-Max-Age: 3628800"); //将这个请求缓存多长时间 $data = array('a','b','c');//要返回的数据 echo json_encode($data);//输出 ?>
5.window.postMesage 不常用
window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
pageA()代码如下：
<iframe src="https://www.jesse.com/index.html"></iframe> <script type="text/javascript"> var obj = { msg: 'hello world' } function postMsg() { var iframe = document.getElementById('proxy'); var win = iframe.contentWindow; win.postMessage(obj, 'http://www.jesse.com'); } </script> pageB()代码如下： <script type="text/javascript"> window.onmessage = function(e) { console.log(e.data.msg + " from " + e.origin); } </script>
6. location.hash 不常用
pageA()代码如下：
function startRequest() { var ifr = document.createElement('iframe'); ifr.style.display = 'none'; ifr.src = 'http://www.jesse.com/b.html#sayHi'; //传递的location.hash document.body.appendChild(ifr); } function checkHash() { try { var data = location.hash ? location.hash.substring(1) : ''; if (console.log) { console.log('Now the data is ' + data); } } catch (e) {}; } setInterval(checkHash, 5000); window.onload = startRequest;
pageA()代码如下：
parent.parent.location.hash = self.location.hash.substring(1);
pageB()代码如下：
function checkHash() { var data = ''; //模拟一个简单的参数处理操作 switch (location.hash) { case '#sayHello': data = 'HelloWorld'; break; case '#sayHi': data = 'HiWorld'; break; default: break; } data && callBack('#' + data); } function callBack(hash) { // ie、chrome的安全机制无法修改parent.location.hash，所以要利用一个中间的域下的代理iframe var proxy = document.createElement('iframe'); proxy.style.display = 'none'; proxy.src = 'http://www.jack/c.html' + hash; // 注意该文件在"www.jack.com"域下 document.body.appendChild(proxy); } window.onload = checkHash;