iframe
专业来说iframe会创建包含另外一个文档的内联框架
通俗来说iframe可以将另外一个网页的内容嵌入在自己网页中
咱们来看看它的优点
可以直接引用其它页面展示在自己网站内容，节省开发和维护成本
咱们来看看它的缺点
1、页面中如果存在iframe元素，那么只有等待iframe元素及其内部的元素都加载完毕后，页面的onload事件才会触发，因此会造成onload事件的阻塞。如果iframe不是你页面主要显示的内容，那么请当页面其它元素加载完成，也就是onload事件执行的时候动态为iframe添加src
2、搜索引擎无法识别iframe中的内容，不利于网页的SEO
3、iframe和主页面共享连接池，而浏览器对相同域的连接有限制，会影响页面的并行加载
4、浏览器的后退前进对iframe页面交互无效
iframe元素的基本属性和事件
DOM结构如下：
<iframe id="xxx" name="xxx" width="200" height="200" src="xxx.com" sandbox="xxxx" >
name - 用于定位嵌入的浏览上下文的名称
width - iframe元素的宽度，默认值300
height - iframe元素的高度，默认值150
src - 请求资源地址
sandbox - 沙箱属性，ie9及以下不支持
还有其它的属性，可以参考MDN进行使用
常用的事件比如onload事件，在iframe元素加载完成后触发
document.getElementById('xxx').onload = function() { }
动态新增iframe标签
var iframeEle = docuemnt.createElement('iframe');
iframeEle.id = 'xxx';
iframeEle.style = 'width: 200px; height: 200px; border: 0;';
iframeEle.src = 'xxx.com';
document.body.append(iframeEle);
父子通信
1、父页面和iframe的src地址需要是同源，才能进行数据交互
2、根域名相同，二级域名不同，可以通过设置document.domain为同一个根域名来进行跨域交互
3、跨域交互，需要用到window.postMessage方法来进行数据交互
同源场景下：
父页面获取子页面window对象
document.getElementById('xxx').contentWindow
window.frames[x]
子页面获取父页面window对象
window.parent
根域名相同，二级域名不同
iframe页面(a.xxx.com)
document.domain = 'xxx.com'
父页面(b.xxx.com)
document.domain = 'xxx.com'
跨域交互
发送方进行消息发送，接收方通过监听message来获取发送内容
iframe页面(a.xxx.com)
window.addEventListener('message', function(event) {
event.data - 发送方传递的数据对象
event.origin - 发送发的orgin
event.source - 发送方的window对象引用
}, false)
父页面(b.yyy.com)
document.getElementById('xxx').contentWindow.postMessage(message, targetOrgin, [transfer]);
message - 发送的信息内容
targetOrgin - 指定哪些窗口能收到此消息，所有源可设置为*
transfer - 该参数可选，可忽略
注意事项
- iframe内部使用window.history.go(xx)和window.history.back()和在父页面使用是一样的效果
- iframe内部使用window.location.href不会改变浏览器的url，但是会新增一条历史记录
- iframe的每次重载，都会引起父页面onload事件的触发
