iframe的使用

开始接触前端的时候，搜索iframe出来的是iframe耗能，不安全等，以致于并无去正式了解，想来也确实是太不够严谨。如今在业务中有须要用到iframe来实现一些特定的需求，因此以为颇有必要去了解一下，查了一些资料进行整理。

概念： iframe 元素会建立包含另一个文档的内联框架（即行内框架）,用于设置文本或图形的浮动图文框或容器

基本使用：

<!--这个是最一般的使用，还能够设置不少的属性值的-->
<iframe src="http://m.haimati.cn"></iframe>
复制代码

经常使用属性，会在下文中作一些介绍

• frameborder:是否显示边框，1(yes),0(no)
• height:框架做为一个普通元素的高度，建议在使用css设置。
• width:框架做为一个普通元素的宽度，建议使用css设置。
• name:框架的名称，window.frames[name]时专用的属性。
• scrolling:框架的是否滚动。yes,no,auto。
• src：内框架的地址，可使页面地址，也能够是图片的地址。
• srcdoc , 用来替代原来HTML body里面的内容。可是IE不支持。
• sandbox: 对iframe进行一些列限制，IE10+支持

基本的特性： 能自由操做iframe和父框架的内容(DOM). （前提条件是同域，若是跨域顶多只能实现页面跳转）

那什么是同域/ 什么是跨域呢?

就是判断你的url首部是否同样，例如：

A:<iframe id="mainIframe" name="mainIframe" src="/main.html" frameborder="0" scrolling="auto" ></iframe>

B:<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>
复制代码

使用A时，由于同域，父页面能够对子页面进行改写,反之亦然。 使用B时，不一样域，父页面没有权限改动子页面,但能够实现页面的跳转 这里，咱们先从简单的开始，当主页面和iframe同域时，咱们能够作些什么。

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来获取

<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);
console.dir(document.getElementById("ifr1").contentWindow);
</script>
复制代码

在iframe中获取父级内容

同理，在同域下，父页面能够获取子iframe的内容，那么子iframe一样也能操做父页面内容。在iframe中，能够经过在window上挂载的几个API进行获取. 获取了以后，咱们就能够进行相关操做了。

iframe的轮询

话说在好久好久之前，咱们实现异步发送请求是使用iframe实现的~! 那时候为了避免跳转页面，提交表单时是使用iframe提交的。如今，前端发展很快，websocket,SSE,ajax等的出现，颠覆了iframe, 如今基本上只能活在IE8,9的浏览器内了。

iframe长轮询

若是写过ajax的童鞋，应该知道，长轮询就是在ajax的readyState = 4的时，再次执行原函数便可。 这里使用iframe也是同样，异步建立iframe，而后reload, 和后台协商好, 看后台哥哥们将返回的信息放在,而后获取里面信息便可. 这里是直接放在body里.

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

还有一些应用还有待去结合业务场景敲实例，未完待续···