多种方法制作自适应屏幕的iframe

frame在创建web应用的时候使用广泛，尤其是制作后台管理。那么首先我们看一下iframe怎么来使用。

iframe的属性比较多，在这里我就列出来几个比较常用的。

frameborder ： 规定是否显示框架周围的边框。0代表不显示，1代表显示。

height ： 规定 iframe 的高度。可以使用像素为单位的数值或者使用百分比数值

name ： 规定 iframe 的名称 方便DOM获取或者js调用

scrolling： 规定是否在 iframe 中显示滚动条。可选值有 yes 、no、auto

src： 规定在 iframe 中显示的文档的 URL

width：  定义 iframe 的宽度

下面我们来看下使用iframe的一个例子iframe.html：

1	< iframe  name = "main"   src = 'example.html'  frameborder = "0"  scrolling = "no"    width = "100%"  ></ iframe >

 

保存上面的代码，然后用浏览器打开，结果是使人失望的，因为只显示了“一截”example.html网页的内容，如果我们把 scrolling设置为yes呢

1	< iframe  name = "main"   src = 'example.html'  frameborder = "0"  scrolling = "yes"    width = "100%"  ></ iframe >

 

结果是出现了下拉框，当iframe没有达到网页的实际高度而出现了下拉框是很难让人接受的，那么我们需要为iframe设置高度

 

1	< iframe  name = "main"   src = 'example.html'  frameborder = "0"  scrolling = "yes"    width = "100%" height = "620" ></ iframe >

这次可能能够正好覆盖你现在的页面了，但是有时候我们想在iframe中展示的内容高度有高有低，那么都按照一个方法是不是太蹩脚了呢？

好了，现在就把我知道的2中iframe自适应屏幕的方法告诉大家：

方法一：这个方法是我从网上看到的，看到很多人都在用，比较简单

1	< iframe  name = "main"   src = 'example.html'  frameborder = "0"  scrolling = "no" onload = "this.height=main.document.body.scrollHeight+20"   width = "100%"  ></ iframe >

大家可以看到，其实就是在iframe中添加了一个onload事件。后面的”+20“是我添加的，因为我感觉如果内容太贴近底部并不好，所以我再给大家推荐一种方法。

方法二：js控制自适应屏幕

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

< script  language = "JavaScript" > if(!Array.prototype.map) Array.prototype.map = function(fn,scope) { var result = [],ri = 0; for (var i = 0,n = this.length; i <  n ; i++){ if(i in this){ result[ri++] = fn.call(scope ,this[i],i,this); } } return result; }; var  getWindowWH  =  function (){ return ["Height","Width"].map(function(name){ return window["inner"+name] || document.compatMode === "CSS1Compat" && document.documentElement[ "client" + name ] || document.body[ "client" + name ] }); } window.onload  =  function  (){ if(!+"\v1" && !document.querySelector) { //IE6 IE7 document.body.onresize  = resize; } else {  window.onresize  = resize; } function resize() { wSize(); return false; } } function wSize(){ var  str = getWindowWH (); var  strs =  new  Array(); strs =str.toString().split(","); //字符串分割 var  h  =  strs [0] - 95-30; $('#Main').height(h); } wSize(); </script>