【JS应用】Iframe 解决跨域

iframe 是html内联框架，用于在网页内显示网页。

添加 iframe 的语法

例如：

 

跨域的东西， 简直不要接触太多，网上相关内容一抓一大把，但是突然学习到一个关于前端解决跨域的方式

就是 利用 iframe

不管你有没有了解过，反正我没有

我觉得很有用并且容易忘，所以我记录下来哈哈哈

下面会分三块内容进行描述

1、基本原理

2、简单模拟

2、封装的函数

3、封装函数实战

如果觉得排版不好看，可以看原版 【JS应用】Iframe 解决跨域 ，或者拉到最后关注公众号吧

 

解决场景

现在我们在 http://a.com 的域名下有一个页面

我们要请求 http://b.com 下的一个接口，很明显是会跨域的，无法直接请求

今天我们使用 iframe 来解决这个问题

 

基本原理

1、需要三个页面

两个同域（http://a.com）的 页面，一个和接口同域的 页面（http://b.com）

其中一个页面是父页面，也就是真正的内容页，展示数据的

另外两个作为子页面，是辅助父页面请求跨域数据用的，不会显示在页面中

2、利用全局变量 window.name 存储数据

父子页面利用 window.name 进行通信，但是前提是同域

当 父子页面不同域的时候，父子无法访问对方 window.name

但是，如果是同级页面切换，就算是不同域，window.name 也是可以访问的

3、数据请求

现在请求 http://b.com 的接口，所以只能在 http://b.com 下的页面（这个是子页面）进行请求

请求成功后，保存在当前的 window.name 中

4、页面跳转

上一步保存完数据之后，由 http://b.com 页面 跳到 http://a.com 页面

此时 http://a.com 页面就能通过 window.name 拿到 http://b.com 保存过的数据啦

5、给父页面传递数据

上面那个 http://a.com 页面是辅助页，拿到数据之后，需要传递给真正需要数据的父页面（同样是 http://a.com 下）

大概了解之后，我们来说一下简单流程

现在有 http://a.com 下的内容页 A，需要请求接口 http://b.com/xxxx，但是跨域

1、内容页 A 嵌入一个隐藏 iframe，iframe 加载 http://b.com 下的辅助页面 B

2、辅助页面B 开始请求接口 http://b.com/xxx，请求成功，存放到 window.name

3、隐藏 iframe 由页面B 跳转到 http://a.com 下另一个辅助页（页面C）

4、页面C 读取到 B存放的 window.name，然后传递给 父页面A

5、父页面A 拿到 数据，用于展示在页面上

 

简单模拟

现在我启动了两个服务

1、localhost:3001 下有 a.html 和 c.html

a.html 是内容页，需要使用数据的终端页（以下简称A）

c.html 是辅助页（以下简称C）

2、localhost:3002 下有 b.html

b.html 也是辅助页，用于请求数据（以下简称B）

内容页 A

在 A 中，使用 iframe 嵌入了 B，并且全局设置了一个函数 getData

这个函数的作用是，为了给 C页面调用，传入接口的数据的

我是A页面

辅助页 B

B 页面当然是用于请求接口了，这里使用 定时器模拟接口，请求成功后跳转到 C

我是B页面

辅助页 C

B 请求完，跳到C 之后，C 拿到 window.name，然后调用 A 的方法 getData，并且把数据传过去

我是C页面

没错，这就完成了 iframe 解决跨域的问题，但是实际上并不会这么做，肯定是封装得更加适用一些