iframe 是html内联框架，用于在网页内显示网页。
添加 iframe 的语法
<iframe src="URL"></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页面调用，传入接口的数据的
<body>
我是A页面
<script>
window.getData=function(data){
console.log("获取到数据",data)
}
</script>
<iframe src="http://localhost:3002/b.html" ></iframe>
</body>辅助页 B
B 页面当然是用于请求接口了，这里使用 定时器模拟接口，请求成功后跳转到 C
<body>
我是B页面
<script>
console.log("B页面开始请求接口")
setTimeout(function(){
window.name="我是B页面保存的数据"
location.href="http://localhost:3001/c.html"
},2000)
</script>
</body>辅助页 C
B 请求完，跳到C 之后，C 拿到 window.name，然后调用 A 的方法 getData，并且把数据传过去
<body>
我是C页面
<script>// 调用页面A 的方法，并把 name 传过去
parent.getData(window.name)
</script>
</body>没错，这就完成了 iframe 解决跨域的问题，但是实际上并不会这么做，肯定是封装得更加适用一些
1035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
