jquery插件之iframe自适应可视区域

在web项目中常常会使用到框架（frameset），但是使用了frameset的页面没有body，所以不能往顶层的页面上添加遮罩，所以一般性的做法就是在顶层的页面里面加一个iframe，然后让这个iframe能够自动扩展到整个可视区域。

要做到这一点，有两个关键点：

1，在页面加载完时，将iframe的高度和宽度设置为整个页面的可视区域

在jquery中可以通过window的宽度和高度获取

$("window").width();
$("window").height();

2，当页面的大小发生变化是，重新设置iframe的高度和宽度

设置window的resize事件

下面是插件的实现：

(function($){
	$.fn.iframe_autoresize = function(option){

		/**
		* 版本号
		**/
		this.version = "1.0";


		var $this = $(this);
		var defaults = {
			"height":1,
			"width":0
		};
		var opts = $.extend(defaults, option);


		resize($this);


		function resize(){
			var $cur = $($this.get(0));//仅处理第一个


			//设置高度
			if(opts.height != 0){
				var height = $(window).height();
				if(opts.height < 0){
					height = height + opts.height;
					if($(window).height()-height + opts.height< 4 && $.browser.msie){
						//解决IE的4像素问题，IE的应用可能有一些限制
						$("html").css("overflow-y","hidden");
					}
				}else{
					if(opts.height>1){
						opts.height = 1;
					}
					height = $(window).height() * opts.height;
					if($(window).height()-height < 4 && $.browser.msie){
						//解决IE的4像素问题，IE的应用可能有一些限制
						$("html").css("overflow-y","hidden");
					}
				}
				$cur.height(height);
			}
			
			//设置宽度
			if(opts.width != 0){
				var width = $(window).width();
				if(opts.width < 0){
					width = width + opts.width;
				}else{
					if(opts.width > 1){
						opts.width = 1;
					}
					width = $(window).width()*opts.width;
				}
				$cur.width(width);
			}
		}


		$(window).resize(function(){
			resize();
		});
	}
})(jQuery);

调用方法如下：

$("#iframe").iframe_autoresize(option);

option 为js的object对象，包含两个字段

（1）height，设置自动调整的高度属性

当height的值等于0时，本插件不做任何处理

大于0小于等于1时，将iframe的高度设置为：可视区域高度*height属性值

小于0时，将iframe的高度设置为：可视区域高度+height属性值（也就是高度减去height的绝对值，相当于高度变小了）

当大于1时，与等于1一样处理

（2）width，设置自动调整的宽度属性（其定义方式与height类似）

整体的效果如下：

变化整个框架的大小后

在开发过程中，发现了在IE中有一个问题：

如果把iframe设置成为和可视区域一样高（或者将body的高度也设置成这样），会导致出现body出现滚动条，此时只好将body的overflow样式设置成为hidden将超出的部分隐藏（事实上并没有超出，只是body变大了4个像素）

资源下载地址：http://download.csdn.net/detail/yaolihust/6205185