HTML ＜iframe＞实现同域下的页面

通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。

获取iframe里的内容

主要的两个API就是contentWindow,和contentDocument

• iframe.contentWindow, 获取iframe的window对象
• iframe.contentDocument, 获取iframe的document对象
  这两个API只是DOM节点提供的方式(即getELement系列对象).

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
       console.log("window",iwindow);//获取iframe的window对象
       console.log("document",idoc);  //获取iframe的document
       console.log("html",idoc.documentElement);//获取iframe的html
       console.log("head",idoc.head);  //获取head
       console.log("body",idoc.body);  //获取body

另外更简单的方式是，结合Name属性，通过window提供的frames获取.

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
    console.log(window.frames['ifr1'].window); //window.frames['ifr1']===window
console.dir(document.getElementById("ifr1").contentWindow);
</script>

在iframe中获取父级内容

在同域下，父页面可以获取子iframe的内容，那么子iframe同样也能操作父页面内容。在iframe中，可以通过在window上挂载的几个API进行获取.

window.parent //获取上一级的window对象，如果还是iframe则是该iframe的window对象。
window.top //获取最顶级容器的window对象，即打开的页面的文档
window.self //返回自身window的引用，

iframe的轮询

在ajax中。上轮询就是在ajax的readyState = 4的时，再次执行原函数即可。
这里使用iframe也是一样，异步创建iframe，然后reload, 后台将返回的信息放在body,然后获取里面信息即可. 这里是直接放在body里.

var iframwCon = document.querySelector('#container'), text; //传递信息
var iframe = document.createElement('iframe'),
    iframe.id = "frame",
    iframe.style = "display=none;",
    iframe.name = "polling",
    iframe.src = "target.html";
iframCon.appendChild(iframe);
iframe.onload = function(){
   var iloc = iframe.contentWindow.location,
   idoc = iframe.contentDocument;
   setTimeout(function(){
     text = idoc.getElementesByTagName('body')[0].textContext;
     console.log(text);
     iloc.reload();  //刷新页面，再次获取信息，并且会触发onload函数
   }，2000);
}

使用reload进行获取来实现长轮询的效果，同时可以添加iframe和删除iframe的方式，进行发送信息。

自适应iframe之广告的插入

自适应iframe

默认情况自带滚动条。不会全屏。
去滚动条：

设置iframe的高为body的高

var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;

属性	效果
allowtransparency	true or false 设置为透明是否
allowfi=ullscreen	true or false 允许iframe全屏

放嵌套网页

伪类防止网站钓鱼，可以使用window.top来防止你的网页被iframe.

//iframe2.html
if(window != window.top){
  window.top.location.href = correctURL;
}

这段代码的主要用途是限定你的网页不能嵌套在任意网页内。如果你想引用同域的框架的话，可以判断域名。

if (top.location.host != window.location.host){
   top.location.href = window.location.href;
}

当你的网页不同域名的话，上诉就会报错，
所，在使用try…catch…进行错误捕获，如果发生错误，则说明不同域，表明你的页面被盗用，有些浏览器这样写不会报错，需要降级进行处理。
这时候就需要跳转，

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;
}

这只是在浏览器端进行相关的权限的设置。

X-Frame-Options

X-Frame-Options是一个相应头，主要是描述服务器的网页资源的iframe权限。
DENY: 当前的页面不能被嵌套iframe里，即便是在相同域名的页面中嵌套也是不允许，也不允许网页中的嵌套iframe.
SAMEORIGIN: iframe页面的地址只能为同域名下的页面
ALLOW-FROM： 可以在指定的origin url的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 Secuity Policy也是可以对iframe进行限制.

CSP 页面保护
都需要在服务器端上设置好相关的Header.CSP的作用，它能极大的防止你的页面被XSS攻击，而且可以指定js,css,img等资源的origin,防止被恶意注入。
使用主要在后端服务器上配置，可以观察response Header:

Content-Security-Policy: default-src ‘self’

默认配置就是同域： defaul-src “self”
和iframe有关系的就是child-src和sandbox.
child-src 就是用来指定iframe的有效加载路径，其实和X-Frame-Options中配置allow-origin是一个道理。不过,allow-origin 没有得到厂商们的支持。
sandbox 和iframe的snadbox属性一样，可以规定来源能够带有什么权限。

sandbox

sandbox就是用来给指定iframe设置一个沙盒模型限制iframe的更多权限。
启动方式就是使用sandbox属性：

这样会对iframe页面进行一系列的限制：

1. script脚本不能执行
2. 不能发送ajax请求
3. 不能使用本地存储，即localStorage,cookie等
4. 不能创建新的弹窗和window
5. 不能发送表单
6. 不能加载额外插件比如flash等

放宽权限：

<iframe sandbox="allow-same-origin" src="..."></iframe>

常用的配置项：

配置	效果
allow-forms	允许进行提交表单
allow-scripts	允许执行脚本
allow-same-origin	允许同域请求，ajax,strorage
allow-top-navigation	允许iframe能够主导window.top进行页面跳转
allow-popups	允许iframe中弹出新窗口，比如window.open.target=“”——blank“”
allow-pointer-lock	在iframe中锁定鼠标