七种跨域方法

逃离我推掉我的手 2022-05-27 13:09 228阅读 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篇】][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

[2.document.domain]: https://mp.csdn.net/postedit/80003129