注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

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

2013-03-12 14:00:32|  分类: 实例 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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>

  评论这张
 
阅读(45)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017