怎么嵌入一个iframe_学员投稿 | iframe 解决跨域

  天气降温，大家注意保暖~~~

因为学习了腾讯课堂NEXT学院的前端进阶课程，所以打算把课程内容都总结一遍。有些都是很普通很常见的知识，但是为了巩固自己的知识面，梳理自己的知识树，所以每个知识点都会写成文章，所有文章都会放在公众号右下角的前端进阶课程总结中~~~也希望能够帮助到需要的人~~

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

就是 利用 iframe 

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

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

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

1、基本原理

2、简单模拟

2、封装的函数

3、封装函数实战

解决场景

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

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

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

基本原理

1、需要三个页面

两个同域(a.com)的页面，一个和接口同域的页面(b.com)

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

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

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

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

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

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

3、数据请求

现在请求b.com的接口，所以只能在 b.com下的页面(这个是子页面)进行请求

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

4、页面跳转

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

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

5、给父页面传递数据

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

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

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

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

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

3、隐藏 iframe 由页面B跳转到 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)

内容页