javascript跨域的几种方法

he_xd 发布于2019-08-21 10:43 / 1823人阅读

摘要：在支持这个方式的浏览器里，的写法和不跨域的写法一模一样，只要服务器需要设置这种方式适用于主域相同，子域不同，比如和假如这两个域名下各有和在这里操作里的元素数据注意需要设置成自身或更高一级的父域，且主域必须相同。

打个招聘广告：杭州阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@qq.com

此文章学习借鉴了一些其他前端同学的文章，自己做了个实践总结

以下的例子包含的文件均为为 http://www.a.com/a.html 、http://www.a.com/c.html 与 http://www.b.com/b.html，要做的都是从a.html获取b.html里的数据

1.JSONP

jsonp是利用script标签没有跨域限制的特性，通过在src的url的参数上附加回调函数名字，然后服务器接收回调函数名字并返回一个包含数据的回调函数

    function doSomething(data) {
        // 对data处理
    }
    var script = document.createElement("script");
    script.src = "http://www.b.com/b.html?callback=doSomething";
    document.body.appendChild(script);

    // 1.生成一个script标签，将其append在body上，向服务器发出请求
    // 2.服务器根据 callback 这个参数生成一个包含数据的函数 doSomething({"a", "1"})
    // 3.页面事先已声明doSomething函数，此时执行 doSomething(data) 这个函数，获得数据

2.HTML5的postMessage

假设在a.html里嵌套个,在这两个页面里互相通信

a.html

    window.onload = function() {
        window.addEventListener("message", function(e) {
            alert(e.data);
        });

        window.frames[0].postMessage("b data", "http://www.b.com/b.html");
    }

b.html

    window.onload = function() {
        window.addEventListener("message", function(e) {
            alert(e.data);
        });
        window.parent.postMessage("a data", "http://www.a.com/a.html");
    }

这样打开a页面就先弹出 a data,再弹出 b data

3.window.name + iframe

window.name的原理是利用同一个窗口在不同的页面共用一个window.name，这个需要在a.com下建立一个代理文件c.html,使同源后a.html能获取c.html的window.name

a.html

    var iframe = document.createElement("iframe");
    iframe.src = "http://www.b.com/b.html";
    document.body.appendChild(iframe); // 现在a.html里建一个引用b.html的iframe，获得b的数据

    var flag = true;
    iframe.onload = function() {
        if (flag) {
            iframe.src = "c.html";  
// 判断是第一次载入的话，设置代理c.html使和a.html在同目录同源，这样才能在下面的else取到data
            flag = false;
        } else { // 第二次载入由于a和c同源，a可以直接获取c的window.name
            alert(iframe.contentWindow.name);

            iframe.contentWindow.close();
            document.body.removeChild(iframe);
            iframe.src = "";
            iframe = null;
        }
    }

b.html

window.name = "这是 b 页面的数据";

4.window.location.hash + iframe

b.html将数据以hash值的方式附加到c.html的url上，在c.html页面通过location.hash获取数据后传到a.html(这个例子是传到a.html的hash上，当然也可以传到其他地方)

a.html

    var iframe = document.createElement("iframe");
    iframe.src = "http://www.b.com/b.html";
    document.body.appendChild(iframe); // 在a页面引用b
    function check() { // 设置个定时器不断监控hash的变化，hash一变说明数据传过来了
        var hashs = window.location.hash;
        if (hashs) {
            clearInterval(time);
            alert(hashs.substring(1));
        }
    }
    var time = setInterval(check, 30);

b.html

    window.onload = function() {
        var data = "this is b"s data"; 
        var iframe = document.createElement("iframe");
        iframe.src = "http://www.a.com/c.html#" + data;
        document.body.appendChild(iframe); // 将数据附加在c.html的hash上
    }

c.html

// 获取自身的hash再传到a.html的hash里，数据传输完毕
parent.parent.location.hash = self.location.hash.substring(1);

5.CORS

CORS是XMLHttpRequest Level 2 里规定的一种跨域方式。在支持这个方式的浏览器里，javascript的写法和不跨域的ajax写法一模一样，只要服务器需要设置Access-Control-Allow-Origin: *

6.document.domain

这种方式适用于主域相同，子域不同，比如http://www.a.com和http://b.a.com
假如这两个域名下各有a.html 和b.html,

a.html

    document.domain = "a.com";
    var iframe = document.createElement("iframe");
    iframe.src = "http://b.a.com/b.html";
    document.body.appendChild(iframe);
    iframe.onload = function() {
        console.log(iframe.contentWindow....); // 在这里操作b.html里的元素数据
    }

b.html

    document.domain = "a.com";

注意：document.domain需要设置成自身或更高一级的父域，且主域必须相同。

云服务器 GPU云服务器 js缓存的几种方法最基本的几种 html的几种轮播 js的几种数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86082.html

总结跨域的几种方式

摘要：比如域的页面通过嵌入了一个域的页面，可以通过以下方法实现和的通信通过跨域以上几种都是双向通信的，即两个，页面与或是页面与页面之间的，下面说几种单项跨域的一般用来获取数据，因为通过标签引入的是不受同源策略的限制的。跨域整理@(前端笔记) 跨域只要协议、域名、端口有任何一个不同，都被当作是不同的域。由于浏览器的同源策略，其限制之一是不能通过ajax的方法情趣请求不同源的文档。第二个限制...

diabloneo 2019-08-21 17:52 评论0 收藏0
Web开发之跨域与跨域资源共享

摘要：例外当涉及到同源策略时，有两个主要的例外授信范围两个相互之间高度互信的域名，如公司域名，不遵守同源策略的限制。端口未将端口号加入到同源策略的组成部分之中，因此和属于同源并且不受任何限制。原文链接：http://www.devsai.com/2016/11/24/talk-CORS/ 同源策略（same origin policy） 1995年，同源政策由 Netscape 公司引入浏...

Eastboat 2019-08-20 12:29 评论0 收藏0
什么是跨域以及几种简单解决方案

摘要：什么是跨域要明白什么是跨域之前，首先要明白什么是同源策略同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。最后，解决跨域问题还有一个更通用更强大的方法，我单独把它拿出来总结了一篇文章跨域问题的根本解决方案。什么是跨域？要明白什么是跨域之前，首先要明白什么是同源策略？同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。那怎样判断是否是同...

zhaofeihao 2019-08-26 11:44 评论0 收藏0
JSONP的一点笔记<修改中>

摘要：请求服务器数据并规定回调函数为上面代码通过动态添加元素，向服务器发出请求。另外假设向服务发送的请求是这样的在这种情况下，是表示请求的请求参数，而是应用程序的回调函数的名称。清单调用回调服务注意，我们使用作为回调函数名，而非真实的函数名。同源策略同源策略(Same origin policy)，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript的浏览器都...

姘存按 2019-08-20 17:22 评论0 收藏0
Spring Boot 2.x（九）：遇到跨域不再慌

什么是跨域首先，我们需要了解一下一个URL是怎么组成的： // 协议 + 域名（子域名 + 主域名） + 端口号 + 资源地址 http: + // + www.baidu.com + :8080/ 只要协议，子域名，主域名，端口号这四项组成部分中有一项不同，就可以认为是不同的域，不同的域之间互相访问资源，就被称之为跨域。随着前后端分离开发的越来越普及，会经常遇到跨域的问题，当我们在浏览...

余学文 2019-08-19 10:17 评论0 收藏0