最近比较忙，疯狂开发新需求，疯狂修复同事留下的bug
乘着发烫的手指还有余温，水一篇文章😊
今天给大家带来的文章是关于 iframe 标签使用心得
麻烦各位老爷们，点赞👍收藏+加关注😁
iframe
借用w3c官方解释：iframe元素会创建包含另外一个文档的内联框架(即行内框架）。
你可以简单的理解为：iframe就是一个隔离沙盒，相当于我们在一个页面内可以操控很多个标签页一样。
这样你就可以无限套娃，在老项目中通过iframe嵌套新项目，你就可以不用担心因为升级导致的各种问题了。
你爱我，我爱你🤟，滴滴滴...
应用场景
在你想要业务页面中嵌套另一个项目（web页面）！！
对的，你没有理解错，当我们在维护老项目中，譬如 webpack2 老项目🙏，庞大且没有功夫去升级Webpack版本和最新的 plugin，那么告诉你一个偷懒的方法，那就是 ==》 iframe；
iframe基本使用
<iframe src="asscre.com" />
iframe常用属性:
| 属性 | 值 | 说明 |
|---|---|---|
| frameborder | 1(yes),0(no) | 显示边框 |
| height | pixels/% | iframe高度 |
| width | pixels/% | iframe宽度 |
| name | iframe_name | iframe名称 |
| scrolling | yes/no/auto | iframe是否可以滚动 |
| src | url | iframe嵌套页面（或图片）的地址 |
| srcdoc | HTML_code | iframe中显示的页面的 HTML 内容 |
| ... | ... | ... |
实际开发中经验笔记
既然是要解决老项目偷懒不升级的问题，那么，就不得不会下面的骚操作了😁：
iframe跨域问题：Blocked a frame with origin XXX from accessing a cross-origin；
说到跨域，浏览器判断跨没跨域，主要根据两个点：
- 你网页的协议(protocol)，
- 你的host是否相同，即，就是url的首部:
window.location.protocol +window.location.host
下面就是我用到的方法：
postmessage:
- 该方法挂载到window对象上，即，使用 window.postmessage() 调用.
- 该方法接受两个参数：postMessage(message, targetOrigin):
- message: 传递给 iframe 的内容, 通常是 String,也可以传 object对象。
注意：传object对象前请参考这一句话:
意思就是，希望不要直接传Object对象。
如果一定要用，推荐使用是JSON.stringify进行转化。
解决方法：
在子页面
发送消息: 使用postmessage方法
// *号就是处理跨域问题
window.postMessage("message", '*');
// 当我们一个iframe中需要监听多个触发方法时
// 我们只需要把postMessage方法中的第一个参数定义为object对象
window.postMessage({ type: 'updateGuide' }, '*');
然后在父页面
接受消息: 监听message事件
window.addEventListener('message', function (e) {
console.log(e.data);
})
// 当我们一个iframe中需要监听多个触发方法时
window.addEventListener('message', function (e) {
if (e.data.type === 'updateGuide') {
this.$bus.$emit('updateGuide');
} else if ()...
})
message提供的event对象上有3个重要的属性，data、origin、source。
- data：postMessage是传递进来的值；
- origin：发送消息的文档所在的域；
- source：发送消息文档的window对象的代理，如果是来自同一个域，则该对象就是window，可以使用其所有方法，如果是不同的域，则window只能调用postMessage()方法返回信息。
防止别人白嫖我们😁：防嵌套、防钓鱼
在我们使用iframe时需要注意的两点就是：
- 你的网页被别人iframe：以前那些mht过生日送q币、进来就送AK47的那种钓鱼网站啦！懂得都懂😈
- 你iframe别人的网页：这个就自己了解了解啦，hhh
所以，我们为了安全，安全措施要做好！
防嵌套网页
为了防止网站被钓鱼，可以使用window.top来防止你的网页被iframe。
- 同一域名下：
// 限定你的网页不能嵌套在任意网页内
if(window != window.top){
window.top.location.href = correctURL;
}
// OR => 在引用同域的iframe的话，可以判断域名
if (top.location.host != window.location.host) {
top.location.href = window.location.href;
}
- 不同域名下
try{
top.location.hostname; //检测是否出错
//如果没有出错，则降级处理
if (top.location.hostname != window.location.hostname) {
top.location.href =window.location.href;
}
} catch(e){
top.location.href = window.location.href;
}
这样，别人想白嫖我们，或者想干点啥不可言语的事时，我们可以直接：NO！ 拒绝门外！
好了，今天的分享就到这里，感谢大家的阅读！
每日总结一点点，我是Asscre，欢迎帮我点赞👍收藏+关注！
下次见！
