跨域的方法

来源：互联网发布：马克威算法学院编辑：程序博客网时间：2024/06/16 12:54

ajax:XMLHttpRequest() 不能跨域

1、document.donain='a.com';

2、服务器代理:XMLHttpRequest代理文件

3、script 标签：jsonp

利用script标签不存在跨域问题

jsonp原理：json+padding（表示内填充）

function box(json){

alert(json.name);

}

box({name:"lynn"})

4、location.hash 通过改变哈希值来实现两个域之间的交互

跨域：发送一个请求，去去页面中的数据，可以通过iframe。在A网站上嵌套B网站的iframe

A站：

在网址中加哈希值，是不会改变网址的指向的，通过哈希值能将网址带过去。那边接收数据，处理并返回数据。

B站：parent.location.hash = self.location.hash (但是ie和谷歌不支持)

5、window.name

www.a.com/c1.html

www.a.com/代理.html

www.b.com/c2.html window.name='数据';

c1和c2共用代理.html

在c2网站下创建一个c1的代理文件

跟利用hash是差不多的，都是在自己当前的域下创建一个代理的文件，然后通过代理跟当前页面下是同一个域的原则，提交过去

6、flash

7、html5提供了postMessage

跨域，分为跨主域和跨子域。

跨主域： a.lynn.com/ 和 b.lin.com/ lynn.com/ 和 lin.com/

跨子域： a.lynn.com/ 和 b.lynn.com/ lynn.com 和 b.lynn.com www.lynn.com/ 和 b.lynn.com/ www.a.com/a.js 和 script.a.com/b.js

同一域名，不同端口

同一域名，不同协议

一、收集了网上的跨域请求方法，自己整理和测试了下。

1.<script type='text/javascript'> document.domain='根域名';（只能解决主域相同的二级子域之间的交互）

document.domain = ‘a.com’；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。如果你异想天开的把script.a.com的domian设为baidu.com那显然是会报错地！

www.a.com上的a.html

  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;/*contentWindow 兼容各个浏览器，可取得子窗口的 window 对象。
contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。
*/ // 在这里操纵b.html alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue); };

script.a.com上的b.html

document.domain = 'a.com';

2、原生JavaScript实现

正常情况下的写法：（图为出现的问题：同源策略导致无法请求数据）

<title>无标题文档</title>

</head>

<body>

var xhr = new XMLHttpRequest();

xhr.open("get", "http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js", true);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

console.log(xhr.responseText);

}

};

xhr.send(null);

</script>

</body>

<xml>

解决办法：

（1）通过script标签引用，写死你需要的src的url地址

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<script>
var callbackfunction = function(data) {
console.log('我是跨域请求来的数据-->' + data.name);
};

</script>
<script src="http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js?callback=callbackfunction"></script>

</body>
</html>

其中，test.js中需要写成这样：
callbackfunction({"name":"wwwwwwwwwwww"});

（2）动态加入script标签

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<script>
var callbackfunction = function(data) {
console.log('我是跨域请求来的数据-->' + data.name);
};
var script = document.createElement('script'),
body = document.getElementsByTagName('body');

script.src = 'http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js?callback=callbackfunction';
body[0].appendChild(script);
</script>
</body>
</html>

3、$.ajax使用jsonp解决

jsonp：用于解决主流浏览器的跨域数据访问的问题

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<script src="jquery.min.js"></script>
<script>
$(function(){
$.ajax({
    async: false,
    type: "GET",
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'callbackfunction',
    url: "http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js",
    data: "",
    timeout: 3000,
    contentType: "application/json;utf-8",
    success: function(msg) {
      console.log(msg);
    }
});
})
</script>
</body>
</html>

0 0