HTML5学派：本文介绍了跨域的基础知识，讲解了跨域的相关类型，讲解了解决跨域的方法——如何使用iframe跨域。讲解了iframe跨域的基本原理和流程，并配合实战~
莉莉的独白：跨域是我们课程必不可少的部分，但是我们一直在讲解JSONP的跨域方法，虽然也提到了iframe的跨域方法，但是由于时间因素，没有办法放置在课程中。
本文只讲解iframe的跨域问题。如果想了解更多iframe标签的基础知识，可以直接发送“iframe标签”到“HTML5学校”的微信。
什么是跨域
同源策略限制了在一个源中加载的文本或脚本如何与来自其他源的资源进行交互。
跨域问题是浏览器同源策略的限制。当前域名的 JavaScript 只能读取同域下的页面对象。这也是因为 JavaScript 的安全考虑。
“对了，莉莉，你能解释清楚一点吗？这么一堆理论很难理解~~~” ——我知道你是这么想的
通俗地说，跨域可以理解为：从一个域名访问另一个域名。出于安全原因，浏览器不允许这样做。
跨域类型
我们认为什么时候会发生跨域？或者在什么情况下“浏览器”不允许我们访问它？
不同的域 - 禁止
示例：与
域和子域 - 禁止
示例：与
同一个域名的不同端口 - 禁止
示例：with:8080
不同的协议 - 禁止
示例：与
IP和IP对应的域名——禁止iframe可以解决什么类型的跨域
主域相同，不同子域之间的跨域请求，例如：与
iframe实现跨域的基本原理及流程基本原理
需求：想要访问文件中的数据。
由于跨域、浏览器禁止，所以我们需要控制对文件中数据的访问。
假设A域有a.html（虚拟路径），B域有b.html文件（虚拟路径是），此时我们希望a.html可以访问b.html。（为了防止记忆混乱，下面我们使用最短的A、B域和a.html、b.html）
此时，我们可以通过a.html文件中的iframe来导入b.html文件（即在a.html文件中导入b.html，导入方式为iframe）。然后使用b.html文件访问b域，然后将访问结果传递给a域中的a.html（传输过程是通过iframe）。
iframe跨域进程
1 创建 iframe - 在 .html 文件中，动态创建 iframe 元素/标签
2 视觉控制 - 为了使这个 iframe 元素/标签对用户不可见，需要使用 CSS 将其移出可视区域
3 设置域——为了保证a.html和b.html的顺利访问，需要为这两个文件定义一个域，即设置document.domain为“主域名”
4 数据操作与传输——在a.html文件中编写AJAX应用，这个AJAX的内容就是b.html负责执行的内容；除了编写AJAX应用外，还需要在a.html文件b.html中“命令”执行（在当前步骤中，b.html文件不需要写任何代码，b.html不需要写代码，b.html不写代码【重要的事情说三遍】）
iframe跨域的代码实现
重申需求：想要访问文件中的数据。
由于跨域，浏览器被禁止，所以我们需要控制对文件中数据的访问
HTML5学校友情提示：本代码是基于jQuery.js实现的，所以在编写本代码之前请先介绍jQuery.js。1 创建 iframe 标记 + 2 视觉控件
操作位置：A域中的a.html
Tips：iframe标签中的src地址需要写在B域的b.html中（也就是我们跨域时需要调用的文件）。
Tips：iframe标签的样式设置是把这个标签移出我们网页的可见区域。也就是说，我们在 HTML 中添加了一个新的标签，它必然会出现在结构展示中，但是对于我们来说，我们希望 iframe 不被用户看到，所以我们需要对样式进行处理。
Tips：创建标签后升级访问新域名拿笔记好，并不代表该标签会出现在网页中，所以我们需要使用DOM操作（append）将新生成的标签添加到body中。
3 设置域
操作位置：域A中的a.html和域B中的b.html（双方都需要设置）
域A中的a.html：在$('body').append(newIframe);后面直接添加如下代码 代码：
document.domain = 'h5course.com';将以下代码添加到域 B 中的 b.html 中：
提示：请注意，设置域的代码在 addIframe 函数中。
Tips：注意我们之前提到的，分别是两个文件的虚拟路径；. 因此这里使用“h5course.com”
Tips：你可能会问，b.html没有使用jQuery，为什么要加JQ呢？这主要是因为我们后续的操作，需要通过A域让B域来执行代码。A域的请求中的命令涉及到jQuery（所以，别着急，看我们的第四步）
4 数据处理和传输
！！！~重头戏来啦~！！！
由于这一步比较复杂，我们拆解一步一步给大家讲解。
4.1 获取a.html文件中b.html文件的jQuery对象
如果要a控制b做什么升级访问新域名拿笔记好，首先要得到b（就像我们“要控制一个标签样式，必须先通过选择器选择；要给标签添加事件，必须先通过getElementById方式获取标签”）。
在 b.html 文件中获取 jQuery 对象的代码是：
$('#newframe')[0].contentWindow.$;这里有两点需要注意：newframe的id是我们创建的时候创建的，你可以根据你代码的具体情况进行修改；$('#newframe')加[0]的主要目的是：contentWindow是原生JS的属性，JQ和原生JS不能混用。这时候我们需要把JQ转成native。
对于此代码，在哪里添加到 addIframe？
我们看一下逻辑：我们需要先创建一个iframe标签，然后在标签加载的时候，我们应该在这个标签中获取页面的JQ对象。如果我们不按照这个逻辑，就无法获取到这个对象，所以代码就变成了这样~~~
4.2 得到b.html的对象后，执行一些代码
获取b.html中的JQ对象的目的是让b.html通过a.html访问B域中的数据。所以我们必须通过a.html命令b.html来做一些事情。这也要求我们在创建时需要为addIframe传递一个参数（函数），并在获取到b.html的jQuery对象后执行这个函数。
重复一遍：需要“在创建时为addIframe传递一个参数（函数），并在获取到b.html的jQuery对象后执行该函数”
主要变化：addIframe函数增加了一个参数，在获取到jQuery对象后执行（注意：这个参数是一个函数）。
4.3 在a.html中写入你要在b.html中执行的内容
加油，最后一步就是啦~！！！
至此，我们已经完成了主要功能的搭建，我们只需要定义具体的“b.html要执行的代码”即可。简而言之，调用 addIframe 并传入参数。以下代码
在上面的代码编写中控制对文件中数据的访问。
如果你还想了解AJAX跨域相关问题，直接发“AJAX跨域”到“HTML5学院”微信即可。
HTML5 Editor-Lily & Fortress 耗时 11.0h
