用javascript动态调整iframe高度的方法

2016-02-19 10:39 21 1 收藏

今天图老师小编要跟大家分享用javascript动态调整iframe高度的方法,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - Web开发 】

当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体。这时候你会设置 scrolling="no" 属性。但是这样一来如果iframe里面的内容是变化的,高度会随之内容的变化而变化的时候,你的iframe就会显得太长导致底下一大片空白,或者正好相反,由于iframe的高度太小导致一部分内容会被挡住。这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度。如果需要调整宽度的话,原理是一样的,本文不加详述。

     首先,在你的主页面上必须包含以下这段javascript代码:

代码如下:

script language="Javascript" 
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1] 
//extra height in px to add to iframe in FireFox 1.0+ browsers 
var FFextraHeight=getFFVersion=0.1? 16 : 0  

function dyniframesize(iframename) { 
var pTar = null; 
if (document.getElementById){ 
pTar = document.getElementById(iframename); 

else{ 
eval('pTar = ' + iframename + ';'); 

if (pTar && !window.opera){ 
//begin resizing iframe 
pTar.style.display="block" 

if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ 
//ns6 syntax 
pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight;  

else if (pTar.Document && pTar.Document.body.scrollHeight){ 
//ie5+ syntax 
pTar.height = pTar.Document.body.scrollHeight; 



/script 

然后对于主页面用到iframe的地方添加代码:

iframe id="myTestFrameID" 
onload="javascript:{dyniframesize('myTestFrameID');}" 
marginwidth=0 marginheight=0 frameborder=0 
scrolling=no src="/myiframesrc.php"

来源:http://www.tulaoshi.com/n/20160219/1595396.html

延伸阅读
标签: Web开发
一般来说,我们判断 iframe 是否加载完成其实与 判断 JavaScript 文件是否加载完成 采用的方法很类似: var iframe = document.createElement("iframe"); iframe.src = "http://www.webjx.com"; if (!/*@cc_on!@*/0) { //if not IE     iframe.onload = function(){      &nb...
讯飞输入法调整键盘高度方法   讯飞输入法调整键盘高度方法。由于个人屏幕大小不同和使用习惯不同,为了满足更多用户,讯飞输入法可以自行调整键盘高度,接下来小编就教大家讯飞输入法调整键盘高度方法。 1)点击任意文字编辑框跳出讯飞输入法后点击上方,接着点击。 2)点击,根据需要调整高度后点击即可。 ...
标签: Web开发
关于获取各种浏览器可见窗口大小的一点点研究 script function getInfo() {     var s = "";     s += " 网页可见区域宽:"+ document.body.clientWidth;     s += " 网页可见区域高:"+ document.body.clientHeight;     s += " 网页可见区域宽:"+ document.body.offsetWi...
标签: Web开发
先说明,这个办法只限于iframe中的子页面也是本地页面(不能引用外网页面) ======方法===== 第一步 js部分 function getSize() {        var xScroll, yScroll;               if (window.in...
      好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数,贴到页面里面就能用了。不敢独享,大家要是觉得有用,欢迎使用 源代码如下 <script type="t...

经验教程

528

收藏

71
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部