七种跨域方法

最新推荐文章于 2022-05-29 17:00:59 发布

千羽千寻

最新推荐文章于 2022-05-29 17:00:59 发布

阅读量325

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

`七种跨域方法【1.CROS篇】`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    /*
    * 问题描述：
    * 我本地http://localhost/cors.html有一需求，
    * 想要访问外域http://www.lamport.me/domeCROS.php文件怎么办？
    * <?php
    *  header("Access-Control-Allow-Origin:*");
    *  echo 'cros';
    *  ?>
    * 如果该文件不能访问，你可以在自己的wamp中配置一个虚拟主机进行访问
    * 虚拟主机的配置地址：
    * http://blog.csdn.net/super_yang_android/article/details/53991982
    * 首先想到的是cros方法
    * */


    // 跨浏览器创建并返回CORS对象
    // param method : 请求的方式, get or post
    // param url : 跨域请求的url
    // return xhr : 返回的跨域资源对象
    function createCORSRequest(method, url){
       var xhr = new XMLHttpRequest();
       if ("withCredentials" in xhr){
           xhr.open(method, url, true);    // CORS都是通过异步的请求
       } else if (typeof XDomainRequest != "undefined"){   // IE
           vxhr = new XDomainRequest();
           xhr.open(method, url);
       } else {
           xhr = null;
       }
       return xhr;
    }
    var request = createCORSRequest("get", "http://lamport.me/domeCROS.php");
    if (request){
        // 用于替代onreadystatechange 检测成功，表示接受数据完毕
        request.onload = function(){
            // 对响应的信息进行处理
            alert(request.responseText);    // 取得响应的内容
        };
        // 用于替代onreadystatechange 检测错误。
        request.onerror = function(){
            // 对响应的信息进行处理
        };
        // 用于停止正在进行的请求。
        request.onabort = function(){
            // 对响应的信息进行处理
            alert(request.responseText);
        };
        // 跨域发送请求
        request.send();
    }


</script>
</body>
</html>

七种跨域方法【2.document.domain篇】

 上一篇七种跨域方法【1.CROS篇】主要解决的是异域之间的传值
 这里主要解决的是子域与父域之间的传值
 问题描述：
 现有父域：http://b.com/b.com.html
 要向子域：http://a.b.com/a.b.com.html获取数据
 怎么办？
 将document.domain = 'b.com';都设置为父域即可

如果不知道如何配置虚拟主机？
http://blog.csdn.net/super_yang_android/article/details/53991982

父域：http://b.com/b.com.html内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    document.domain = 'b.com';
    var ifr = document.createElement('iframe');
    ifr.src = 'http://a.b.com/a.b.com.html';
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    ifr.onload = function(){
        var doc = ifr.contentDocument || ifr.contentWindow.document;
        // 这里操作DOM
        var oUl = doc.getElementById('ul1');
        alert(oUl.innerHTML);
        ifr.onload = null;
    };
</script>
</body>
</html>

子域：http://a.b.com/a.b.com.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    document.domain = 'b.com';
</script>
<ul id="ul1">我是子域a.b.com中的UL</ul>
</body>
</html>

七种跨域方法【3.JSONP篇】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP</title>
    <script type="text/javascript">
        /*
        * jsonp = json + padding
        * 将json数据放入一个盒子中
        * 下面是服务器端data.php代码：
        * <?php
        *  $_callback = $_GET['callback'];
        *  $data = array(1,2,3);
        *  echo $_callback.'('.json_encode($data).')';
        *  ?>
        * 如果该文件不能访问，你可以在自己的wamp中配置一个虚拟主机进行访问
        * 虚拟主机的配置地址：
        * http://blog.csdn.net/super_yang_android/article/details/53991982
        * */
        var oUrl = 'http://www.lamport.me/data.php?callback=getData';
        (function (oUrl) {
            var oScript = document.createElement('script');
            oScript.type = 'text/javascript';
            oScript.src = oUrl;
            document.getElementsByTagName('head')[0].appendChild(oScript);
        })(oUrl);
        function getData(data) {
            if (data !== undefined) {
                alert(data);
            }
        }
        getData();
    </script>
</head>
<body>

</body>
</html>

七种跨域方法【4.script篇】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
    * script标签不受同源策略限制
    * */
    function loadScript(url, fn) {
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.src = url;

        script.onload = script.onreadystatechange = function () {
            if (!this.readyState || this.readyState === 'loaded'
                    || this.readyState === 'complete') {
                fn();
                script.onload = script.onreadystatechange = null;
            }
        }
        head.appendChild(script);
    }
    // 打印出数据
    window.baidu = {
        sug: function(data){
            console.log(data);
        }
    }
    // 这是一个接口api，它会返回数据给你
    // http://suggestion.baidu.com/su?wd=w
    loadScript('http://suggestion.baidu.com/su?wd=w',function(){console.log('loaded')});
</script>
</body>
</html>

七种跨域方法【5.window.postMessage篇

问题描述：
本地http://localhost/data.html
向异域http://www.lamport.me/data2.html获取数据
如果该文件不能访问，你可以在自己的wamp中配置一个虚拟主机进行访问
虚拟主机的配置地址：
http://blog.csdn.net/super_yang_android/article/details/53991982

http://localhost/data.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.postMessage</title>
    <script>
        /*
        * window.postMessage是html5中的方法
        * */
        window.onload = function () {
            var oInput = document.getElementById('input1');
            var oButton = document.getElementById('btn1');
            oButton.onclick = function () {
                var data = oInput.value;
                window.frames[0].postMessage(data, '*');
            }
        }
    </script>
</head>
<body>
<iframe src="http://www.lamport.me/data2.html" style="display:none" frameborder="0"></iframe>
<input type="text" id="input1" value="你好，地球，我来自黑暗星球">
<button id="btn1">点击我通过iframe框架向http://www.lamport.me/data2.html页面发送并返回数据</button>
</body>
</html>

异域http://www.lamport.me/data2.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.postMessage</title>
    <script>
        window.onmessage = function(e) {
            e = e || event;
            alert('我接受到来自外太空的数据：' + e.data);
        }
    </script>
</head>
<body>

</body>
</html>

七种跨域方法【6.window.name篇】

问题描述：
通过window.name方式
从本地http://localhost/a.html页面
去访问http://www.lamport.me/data.html的数据
如果该文件不能访问，你可以在自己的wamp中配置一个虚拟主机进行访问
虚拟主机的配置地址：
http://blog.csdn.net/super_yang_android/article/details/53991982

本地http://localhost/a.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.name</title>
    <script>
        window.name = '我要通过window.name跨域传递值';
    </script>
</head>
<body>
<a id="al" href="http://www.lamport.me/data.html">点击我跨域传值</a>
</body>
</html>

http://www.lamport.me/data.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.name</title>
    <script>
        alert(window.name);
    </script>
</head>
<body>

</body>
</html>

七种跨域方法【7.location.hash篇】

问题描述：
使用location.hash + iframe实现跨越
现在本地页面a.html要访问异域b.html的数据
怎么办？

环境配置：
a.html 和 c.html我们放在php的wamp中运行
他们的地址为：http://localhost/a.html和http://localhost/c.html
b.html 的代码，我放在lamport.me/b.html中

原理：
1.a.html中有一个隐藏的frame,该frame指向异域lamport.me的b.html，且传递hash值给b.html
2.b.html获取hash值，生成data值，然后动态创建iframe，该iframe将data值传给与a.html同域的c.html
3.因为c.html与a.html同域，可以传值。

如果该文件不能访问，你可以在自己的wamp中配置一个虚拟主机进行访问
虚拟主机的配置地址：
http://blog.csdn.net/super_yang_android/article/details/53991982

本地http://localhost/a.html

<!doctype html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <title>localhost:a.html</title>

    <style type="text/css">

    </style>
</head>

<body>
<script type="text/javascript">
    alert('我是a页面');
    function sendRequest(){
        //动态创建个iframe
        var ifr = document.createElement('iframe');
        ifr.style.display = 'none';
        //跨域发送请求给b.html，参数是#sayHello
        ifr.src = 'http://lamport.me/b.html#sayHello';
        document.body.appendChild(ifr);
    }
    function checkHash(){
        var data = location.hash?location.hash.substring(1):'';
        if(data){
            //这里处理返回值
            alert(data);
            location.hash = '';
        }
    }
    setInterval(checkHash,1000);
    window.onload = sendRequest;
</script>
</body>
</html>

异域http://www.lamport.me/b.html

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>另某个域的:b.html</title>

<style type="text/css">

</style>
</head>

<body>
<script type="text/javascript">
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){
   var proxy = document.createElement('iframe');
   proxy.style.display = 'none';
   proxy.src = 'http://localhost/c.html'+hash;
   document.body.appendChild(proxy);
}
window.onload = checkHash;
</script>
</body>
</html>

本地http://localhost/c.html

<!doctype html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <title>localhost:c.html</title>
</head>

<body>
<script type="text/javascript">
    //因为c.html和a.html属于同一个域，所以可以通过改变其location.hash的值，可以通过parent.parent获取a.html的window对象
    parent.parent.location.hash = self.location.hash.substring(1);
</script>
</body>
</html>

https://blog.csdn.net/super_yang_android/article/details/53992210