跨域资源访问

  1. document.domain:用来得到当前网页的域名。可以给domain赋值,但是有限制,只能赋成当前的域名或者基础域名。利用document.domain实现跨域,前提条件是,这两个域必须属于同一个基础域名!而且所用的协议、端口都要一致。

两个子域名:

aaa.xxx.com
bbb.xxx.com

aaa里的一个网页(a.html)引入了bbb 里的一个网页(b.html),这时a.html里是不能操作b.html里面的内容的。因为document.domain不一样,一个是aaa.xxx.com,另一个是bbb.xxx.com。这时可以通过Javascript将两个页面的domain改成一样的,需要在a.html里与b.html里都加入:
document.domain = "xxx.com";
这样这两个页面就可以互相操作了。也就是实现了同一基础域名之间的"跨域"。
  1. jsonp:通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。比如:有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,假设这个json数据地址是http://example.com/data.php, 那么a.html中的代码就可以这样:

    <script>
    function dosomething(jsondata){
    //处理获得的json数据
    }
    </script>
    <script src="http://example.com/data.php?callback=dosomething"></script>

    因为是当做一个js文件来引入的,所以http://example.com/data.php 返回的必须是一个能执行的js文件,所以这个页面的php代码可能是这样的:

    <?php
    $callback = $_GET['callback']; //得到回调函数名
    $data = array['a','b','c']; //要返回的数据
    echo &callback.'('.json_encode($data).')';//输出
    ?>

    最终那个页面的输出结果是:

    dosomething(['a','b','c']);

    JSONP的缺点是无法发送POST请求

  2. window.name:window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。比如:有一个页面a.html,它里面有这样的代码:

    <script>
    window.name = "我是a页面设置的值";
    setTimeout(function(){
    window.location = 'b.html';
    }, 3000);
    </script>

    b.html的代码如下:

    <script>
    alert(window.name) //我是a页面设置的值
    </script>

    注意,window.name的值只能是字符串的形式,这个字符串的大小最大能允许2M左右甚至更大的一个容量,具体取决于不同的浏览器,但一般是够用了。比如有一个www.example.com/a.html页面,需要通过a.html页面里的js来获取另一个位于不同域上的页面www.cnblogs.com/data.html里的数据。data.html页面里的代码很简单,就是给当前的window.name设置一个a.html页面想要得到的数据值。data.html里的代码:

    <script>
    window.name="我就是a.html想要的数据,所有可以转化成字符串的数据都可以在这里使用,比如可以传递一个json数据";
    </script>

    在a.html页面中使用一个隐藏的iframe来充当一个中间人角色,由iframe去获取data.html的数据,然后a.html再去得到iframe获取到的数据。
    充当中间人的iframe想要获取到data.html的通过window.name设置的数据,只需要把这个iframe的src设为www.cnblogs.com/data.html就行了。然后a.html想要得到iframe所获取到的数据,也就是想要得到iframe的window.name的值,还必须把这个iframe的src设成跟a.html页面同一个域才行,不然根据前面讲的同源策略,a.html是不能访问到iframe里的window.name属性的。这就是整个跨域过程。a.html的代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>window.name跨域</title>
    <script>
    function getData(){
    vra iframe = document.getElementById('proxy');
    iframe.onload = function(){
    var data = iframe.contentWindow.name;//成功获取到数据
    }
    iframe.src="b.html"//这里的b.html为与a.html同源的随便一个页面。
    }
    </script>
    </head>
    <body>
    <iframe id="proxy" src="http://www.cnblogs.com/data.html" style="display:none" onload="getData()"></iframe>
    </body>
    </html>
  3. HTML5的window.postMessage(message, targetOrigin):可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源。调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符*。需要接收消息的window对象,可以通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。上面所说的向其他window对象发送消息,其实就是指一个页面有几个框架的那种情况,因为每一个框架都有一个window对象。举例说明:

    <script>
    function onLoad(){
    var iframe = document.getElementById('iframe');
    var win = iframe.contentWindow;
    win.postMessage('我是来自页面a的消息', '*');
    }
    </script>
    <iframe id="iframe" src="http://www.test.com/b.html" onload="onLoad()"></iframe>

    b.html代码:

    <script>
    window.onmessage = function(e){
    e = e || window.event;
    alert(e.data); //我是来自页面a的消息
    }
    </script>
  4. CORS(Cross-Origin Resource Sharing,跨源资源共享)
    使用自定义HTTP头部,让浏览器和服务器之间进行沟通。在发送请求时,附加一个额外的Origin头部,其中包括请求页面的源信息(协议、域名、端口),服务器根据这个头部,决定这个请求可不可以接受,如果可以接受,就在相应头的Access-Control-Allow-Origin投不中回发相同的源信息(如果是公共资源,可以发“ * ”)。浏览器会查看这个头部是否包含Origin的值,如果不包含则驳回,如果包含就处理相应,得到数据。

文章目录
,