iframe

iframe
1、什么是iframe
用于在页面内显示页面, 使用其会创建包含另外一个文档的内联框架（即行内框架）

2、常用属性 width 定义iframe的宽度 height 定义iframe的高度 name 规定iframe的名称 frameborder 规定是否显示边框（0不显示 1显示） scrolling 规定是否在iframe中显示滚动条（yes, no, auto） src 设置iframe的地址 srcdoc 用来替换iframe中html, body里的内容（IE不支持） sandbox 对iframe进行内容限制  allow-forms  allow-same-origin  allow-scripts  allow-top-navigation  ...  ... 3、获取iframe中的内容 获取iframe  var iframe = document.getElementById("iframe1") 获取iframe的window对象  // 方法1  var iwindow = iframe.contentWindow  // 方法2  var iwindow = window.frames['name'] 获取iframe的document对象  // iframe.contentDocument  var idoc = iwindow.document 4、在iframe中获取父级内容 02.jpg 获取上一级 window 对象（ iframe 可以有多层使用）  window.parent 获取最顶级容器的 window 对象，即打开页面时的文档  window.top 返回自身 window 对象  window.self 5、自适应iframe（广告嵌入） 广告通常与原文无关, 如果直接在某个div下嵌套, 会造成网页布局的混乱, 而且还需要引入额外的css和js文件, 极大的降低了网页的安全性, 而这些弊端可以使用iframe来进行规避 可以将iframe理解为一个沙盒, 里面的内容能够被top window完全控制, 而且网页的css样式不会侵入iframe里的样式  // 去掉滚动条   // 设置iframe的高为body的高  var iframe = document.getElementById("iframe1")  var iwindow = iframe.contentWindow  var idoc = iwindow.document  iframe.height = idoc.body.offsetHeight  allowtransparency 是否允许iframe设置为透明 默认为false  allowfullscreen 是否允许iframe全屏 6、iframe的安全性 6.1 防嵌套网页 iframe 享有 click 优先权，当有人在伪造的主页中进行点击的话，如果点在 iframe 上，则会默认是在操作 iframe 的页面。所以，钓鱼网站就是使用这个技术，通过诱导用户进行点击。为了防止网站被钓鱼，可以使用 window.top 来防止你的网页被 iframe，即限定你的网页不能被嵌套在任何网页内  if(window != window.top){  window.top.location.href = correctURL;  } 6.2 X-Frame-Options X-Frame-Options 是一个相应头，主要是描述服务器的网页资源的 iframe 权限  有三个选项：  1、DENY 当前页面不能被嵌套在iframe里，即便是相同域名的页面中嵌套也不允许，也不允许网页中有嵌套iframe  2、SAMEORIGIN iframe 页面的地址只能为同源域名下的页面  3、ALLOW-FROM 可以在指定的 origin url 的 iframe 中加载  X-Frame-Options: DENY // 拒绝任何iframe的嵌套请求  X-Frame-Options: SAMEORIGIN // 只允许同源请求，例如网页为 foo.com/123.php，則 foo.com 底下的所有网页可以嵌入此网页，但是 foo.com 以外的网页不能嵌入  X-Frame-Options: ALLOW-FROM // http://s3131212.com 只允许指定网页的iframe请求，不过兼容性较差 X-Frame-Options 其实就是将前端 js 对 iframe 的把控交给服务器来进行处理  //js  if(window != window.top){  window.top.location.href = window.location.href;  }  //等价于  X-Frame-Options: DENY  //js  if (top.location.hostname != window.location.hostname) {  　　　　top.location.href =window.location.href;  }  //等价于  X-Frame-Options: SAMEORIGIN Content Security Policy，同样也可以对 iframe 进行限制 6.3 sandbox sandbox 就是用来给指定 iframe 设置一个沙盒模型限制 iframe 的更多权限 sandbox 是 h5 的一个新属性，IE10+支持 启用方式就是使用 sandbox 属性   /*  这样会对iframe页面进行一系列的限制  1、script 脚本不能执行  2、不能发送 ajax 请求  3、不能使用本地存储，即 localStorage，cookie 等  4、不能创建新的弹窗和 window  5、不能发送表单  6、不能加载额外插件比如 flash 等  */ 常用配置项  1、allow-forms 允许进行表单提交  2、allow-scripts 允许执行脚本  3、allow-same-origin 允许同域请求  4、allow-top-navigation 允许iframe能够主导window.top进行页面跳转  5、allow-popups 允许iframe中弹出新窗口, 比如window.open, target='_blank'  6、allow-pointer-lock 在iframe中可以锁定鼠标