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

来源：互联网发布：软件系统详细设计编辑：程序博客网时间：2024/05/22 17:02

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：

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

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

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

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

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

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

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

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

<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控制自适应屏幕

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