iFrame 功能详解

目录索引:

一、简介
二、属性
三、功能
四、应用

一、简介

　　网页“帧”的概念最早是由Netscape所提出，当时全部由“帧”构成的页面，也被称之为 “框架集”页面，在一个“框架集”页面中，“帧”
是其最小构成单位，每个帧都是一个窗口，用于实现在一个框架集页面中载入许多其它页面。而且，W3C也为其推出了三种文档类型之一的框架型:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

　　到了 1996年，Internet Explorer 将iframe元素加入到了 HTML 中，并在IE 4.0中实现了对其支持，在IE5.5中，实现了通过设置allowTransparency属性来设置透明的 iframe 功能。
　　iframe 规定了一个“独立帧”，也叫内联框架。在这个框架中，可以用于保存另一个页面的的窗口，文档等内容。相比于“框架集”页面，iframe可以被放入到页面中的任意位置，并且可以与当前页面其它元素同时存在。
　　在 HTML4.0 版本之后，iframe 以及“框架集”技术都被不建议使用，这是因为 iframe 对浏览器加载页面具有很大的干扰性，搜索引擎的蜘蛛不会识别在 iframe 中被调用的图片、文本、url等内容的，因为该内容不属于该页面，只是访问的时候被临时的调用，
但是目前的 HTML5 中 iframe 又被重新启用。这是因为它对以下的使用环境，还具有很大的优势：

　　· 引入第三方的内容
　　· 用于需要保存历史记录或操作步骤以及焦点的独立子窗口。
　　· 用于解决跨域问题。

简单的了解了iframe与框架集的历史前身，下面让我们从最基础开始学习与iframe相关的知识。

二、属性

　iframe 是一种古老的技术，同时也是一个不断在改进的技术，学习 iframe 的属性，这里只针对性的学习 iframe 具有使用价值的属性。

　　1. src

　　　　规定载入页面的 URL。

　　2. name

　　定义框架窗口的名称。
a,shape,form等标签的target属性，可以指定内容在该框架窗口中打开。　

　　3. frameborder

　　　　规定内联框架边框线是否显示，值如果为0表示不显示边框线，不为0则表示显示边框线。

　　4. width

　　　　设置内联框架的宽。

　　5. height

　　　　设置内联框架的高。

　　6. scrolling

　　　　用于控制 iframe 是否出现滚动条，如果取值为 no 则表示不出现滚动条。

　　7. allowTransparency

　　　　设置 iframe 是否为透明。值为 boolean，取值为 true 表示将 iframe 设置为透明。
　　　　* 该属性只有IE浏览器支持。

　　8. seamless

　　　　设置 iframe 嵌入的内容，在展示上是否是当前文档的一部分。
　　　　该属性是 HTML5 新增属性，实际上也就是取消 iframe 的边框，滚动条而已。

　　9. srcdoc

　　　　该属性是 HTML5 新增属性。用于设置 iframe 中显示的html内容，值为 html 代码。
　　　　该属性可覆盖src属性，如果指定了 srcdoc 那么 iframe 就显示 srcdoc 指定的html内容，否则才会显示src载入的页面。
　　　　示例:

 <iframe srcdoc="<p> Hellow World ! </p>" src="exmaple.com/index.html"></iframe>

　　10. sandbox

　　　　该属性是 HTML5 新增属性。启用一系列对 <iframe> 中内容的额外限制。
　　　　其是有：
　　　　　　allow-forms ：允许iframe中的表单提交
　　　　　　allow-same-origin ：开启同源策略，这里的所开启的同源策略相当于浏览器同源策略的子集。
　　　　　　allow-scripts ：允许iframe中的脚本运行
　　　　　　allow-top-navigation ：嵌入的页面的上下文可以导航（加载）内容到顶级的浏览上下文环境（browsing context）。如果未使用该关键字，这个操作将不可用。

三、功能

　　1. 创建 iframe
　　　通过JavaScript创建iframe的标准方法是利用createElement这个方法：

var ifr = document.createElement('iframe');

　　　而IE 8- 则支持另一种特殊插入方法：

var ifr = document.createElement('<iframe id="iframe' src="" ></iframe>');

　　2. 获取iframe中的内容
　　　* 以下操作都是在同源情况下执行

　　　· 获取 window
　　　　标准写法是通过contentWindow属性，获取iframe内部的窗口(window)对象。

var ifr = document.getElementById('iframe');

ifr.contentWindow // 即iframe所载入页面的window对象。

　　　　同样 iframe 也会像 <frame> 元素一样，加入 window.frames 伪数组中

window.frames['iframe'] // 通过frames伪数可以直接获取iframe所载入页面的window对象。

　　　　注：iframe 是 id名称。
　　　　也就是说： ifr.contentWindow === window.frames['iframe']

　　　 · 获取 document
　　　　用JavaScript获取iframe载入页面的document对象，有两种方式：
　　　　　　方式一： ifr.contentWindow.document
　　　　　　方式二： ifr.contentDocument
　　　　需要注意的是，方式二只有IE8+才能支持。
　　　　兼容性解决方案：

var getIframeDocument = function(ifr){

  return ifr.contentDocument || ifr.contentWindow.document;

};

　　3. 获取上层windo对象
　　　在当前iframe页面中，可以利用以下方式获取上层页面的window对象：

window.parent // 获取上层页面的window对象。

window.top // 获取顶层页面的window对象。

　　4. 获得iframe在父页面中的html标签
　　　在iframe页面中可以通过 window.frameElement 获取到位于上层页面中的 iframe DOM 对象。
　　　* 注意在某些浏览器下，该方式只能作用在服务器环境下。

　　5. iframe onload
　　　之前遇到过一个需求，需要判断iframe是否加载完毕，如果没有加载完成便要展示一个loading层，用于提示正在加载中...
　　拿到这个需求之后，我直接采用了onlaod事件去判断iframe是否加载完毕：
　　　代码：

var ifr = document.getElementById('iframe');

ifr.onload = function() {

	alert('加载完成！');

}

　　　经过测试，发现在chrome、firefox等主流浏览器中都是正常，但是在IE中会出现有时不能触发onload事件的情况。
　　　当时同事提供了另一种解决方案：

var ifr = document.getElementById('iframe');

ifr.onload = function() {

	alert('加载完成！');

}

ifr.src = 'url';

　　　即页面中先放入一个空的iframe，先绑定onload事件，再去为iframe设置src的值。
　　　这种方式确实能够解决onload在IE中有时无法触发的问题，但是通过js去传入iframe src的值，这种操作对于加载时间还是有很大的牺牲。因为这种方式首先要页面加载，然后试行JS，最后才是iframe去加载具体内容。
　　　最后通过查阅资料，发现在IE中 iframe是支持 onreadystatechange 事件，这个事件会根据 iframe 的加载状态不断改变，最终再通过readyState去判断是否加载完成。
　　具体实现代码：

function iframeLoad(obj, fn) {

	obj.isloaded = false;

	obj.onreadystatechange = function() {

		if (this.readyState == 'complete') {

			if (!this.isloaded) {

				this.isloaded = true;

				fn && fn();

			}

		}

	};

	obj.onload = function() {

		if (!this.isloaded) {

			this.isloaded = true;

			fn && fn();

		}

	};

}

　　　最后在无意之中看到别人代码中通过attacheEvent为iframe绑定onload事件，我才明确，原来IE中iframe的onload事件不是不能触发，而是需要IE私有的事件绑定方法绑定才能触发：
　　　完美解决代码：

function iframeLoad(ifr, fn) {

	if (window.attachEvent) {

		ifr.attachEvent('onload', fn);

	} else {

		ifr.onload = function() {

			fn();

		}

	}

}

　　6. iframe 全屏
　　　全屏方法是HTML5的新标准，目前在浏览器中只有Chrome以及Firefox才支持，具体实现的标准也都是各个浏览器厂商的私有标准。
　　　例如Chomre浏览器中：

element.webkitRequestFullScreen()    // 开启全屏

document.webkitCancelFullScreen();  //退出全屏

element.onwebkitfullscreenchange;    // 全屏事件

document.IsFullScreen;                     // 是否全屏

　　　而Firrefox中：

element.mozRequestFullScreen();  // 开启全屏

document.mozCancelFullScreen(); //退出全屏

element.onmozfullscreenchange;  // 全屏事件

document.mozFullScreen;           // 是否全屏

　　通过以上方法与属性，我们可以为iframe设置全屏展示效果。

四，应用

　　1. 防嵌套网页

　　　我们不仅要学会如何嵌套好页面，也应该掌握自己的页面不被其它方恶意嵌套。

　　　最简单的方式，判断顶层窗口是否就是本窗口。

if (window != window.top) {

	window.top.location.href = self.location.href;

}

　　2. 广告
　　　通过iframe载入广告页面，优点就在于iframe相当于一个独立的沙盒，你引入额外的css和js文件，也不会对当前页面的布局或功能产生影响。
　　　一般而言使用iframe 载入广告都是在页面中创建一个跟自己同域的空iframe。然后用这个iframe去载入对应的广告页面即可。
　　　嵌入广告用的iframe模板：

<iframe width="728" height="90" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="" style="left:0;position:absolute;top:0;"></iframe>

　　3. 高度自适应

　　　· 外部检测高度

(function(root){

	var iframe = document.getElementById('iframe');

	function setHeight(){

		var doc = iframe.contentDocument || iframe.contentWindow.document,

			height = doc.documentElement.scrollHeight || doc.body.scrollHeight;

		iframe.style.height = height + 'px';

	}

	if(window.attachEvent){

		iframe.attachEvent('onload',function(){

			setHeight();

		});

	}else{

		iframe.onload=function(){

			setHeight();

		}

	}

}(window));

　　　　这种方式，需要在 iframe 的 onload 事件中进行高度处理，如果此时改变嵌套页面的内容，并不会再次触发onload事件。

　　　· 内部响应高度

(function(root){

  	var height = 0,

  		back = 0;

  	function heightCompare(){

  		try{

  			height = document.documentElement.scrollHeight || document.body.scrollHeight;

  			if(height != back){

  				window.frameElement.style.height = height + 'px';

  				back = height;

  			}

  			setTimeout(arguments.callee,1000);

  		}catch(e){}

  	}

  	heightCompare();

}(window));

　　　相比之下，更加推荐这种方式，因为通过定时器实时检测，可以动态的根据iframe页面中的内容变化而变化。另外代码的维护也统一在被嵌套页面。

PS : ~ 转载的童鞋请注明出处哦！另外，如果有不足之处，或者是更好的建议，请一定要给我留言 ~