- 浏览: 249237 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
a785975139:
受教了,谢谢
JS中&&和||用法 -
传奇之行:
楼主,语句2 ||前面已经为true,后面的(0 & ...
JS中&&和||用法 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
(转)JS setTimeout延迟时间为0的详解 . -
hebad90:
...
JS中&&和||用法 -
lian819:
感谢LZ的总结, 受教了
JS中&&和||用法
(转)iframe自适应高度
- 博客分类:
- Web前端
不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数:
function SetWinHeight(obj) { var win = obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offsetHeight) win.height = win.contentDocument.body.offsetHeight; else if (win.Document && win.Document.body.scrollHeight) win.height = win.Document.body.scrollHeight; } } }
最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配
<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"> </iframe>
这么的这种也是跟上面的解决方法类似的代码
经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。
HTML代码:
<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()"> </iframe> Javascript代码: <script type="text/javascript" language="javascript"> function iFrameHeight() { var ifm = document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document: ifm.contentDocument; if (ifm != null && subWeb != null) { ifm.height = subWeb.body.scrollHeight; } } </script>
下面这个兼容性更好一些
<script language="javascript" type="text/javascript"> function dyniframesize(down) { var pTar = null; if (document.getElementById) { pTar = document.getElementById(down); } else { eval('pTar = ' + down + ';'); } 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 + 20; pTar.width = pTar.contentDocument.body.scrollWidth + 20; } else if (pTar.Document && pTar.Document.body.scrollHeight) { //ie5+ syntax pTar.height = pTar.Document.body.scrollHeight; pTar.width = pTar.Document.body.scrollWidth; } } } </script> <iframe src="/default2.aspx" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%"> </iframe>
另一种情况的iframe解决方案(超简单)
重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)
之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下
1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦)
parent.document.all("框架ID名").style.height = document.body.scrollHeight; parent.document.all("框架ID名").style.width = document.body.scrollWidth;
这里的 框架ID名 就是Iframe的ID,比如:
<IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"> </IFRAME>
2、给你网站里所有的被包含文件里面每个都加入
<script language = "JavaScript" src = "bottom.js"/></script>
3、OK,收工!
在WINXP、IE6下面测试通过。很简单吧!
实现 iframe 的自适应高度
实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。
<script type="text/javascript"> //** iframe自动适应页面 **// //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。 //定义iframe的ID var iframeids = ["test"] //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏 var iframehide = "yes" function dyniframesize() { var dyniframe = new Array() for (i = 0; i < iframeids.length; i++) { if (document.getElementById) { //自动调整iframe高度 dyniframe[dyniframe.length] = document.getElementById(iframeids); if (dyniframe && !window.opera) { dyniframe.style.display = "block" if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape dyniframe.height = dyniframe.contentDocument.body.offsetHeight; else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE dyniframe.height = dyniframe.Document.body.scrollHeight; } } //根据设定的参数来处理不支持iframe的浏览器的显示问题 if ((document.all || document.getElementById) && iframehide == "no") { var tempobj = document.all ? document.all[iframeids] : document.getElementById(iframeids) tempobj.style.display = "block" } } } if (window.addEventListener) window.addEventListener("load", dyniframesize, false) else if (window.attachEvent) window.attachEvent("onload", dyniframesize) else window.onload = dyniframesize </script>
第三中方法批量iframe自适应:
工作中遇到iframe随所含内容自适应高度的问题,以前在网上看到过类似问题的解决方法,于是搜索一下,找到了一个比较完整的能够兼容浏览器的解决方法,省得自己写了。
虽然不用自己写,思路还是要明白,基本上就是取得iframe属性src所指定的包含文档中内容的高度,然后用来设置iframe自身的高度,在iframe所在页面载入时对页面中的所有需要自适应高度的iframe进行自动设置,省时省力,如果确定页面中全部iframe都需要自适应高度,直接取得iframe数组给代码,就连ID都不用自己写了,完成程序搞定。(代码贴上来:)
<script language="javascript"> //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。 //定义iframe的ID var iframeids = ["test"]; //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏 var iframehide = "yes"; function dyniframesize() { var dyniframe = new Array() for (i = 0; i < iframeids.length; i++) { if (document.getElementById) { //自动调整iframe高度 dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); if (dyniframe[i] && !window.opera) { dyniframe[i].style.display = "block"; if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; } } //根据设定的参数来处理不支持iframe的浏览器的显示问题 if ((document.all || document.getElementById) && iframehide == "no") { var tempobj = document.all ? document.all[iframeids[i]] : document.getElementById(iframeids[i]); tempobj.style.display = "block"; } } } if (window.addEventListener) window.addEventListener("load", dyniframesize, false); else if (window.attachEvent) window.attachEvent("onload", dyniframesize); else window.onload = dyniframesize; </script>
网上有人改进了方法,解决了当iframe所包含文档内容高度动态变化时自动调整iframe高度的问题,原理是在iframe所在页面不断扫描iframe包含文档的内容高度并改变iframe自身高度,这种方法貌似解决了问题,但是对页面速度和系统资源占用是否有影响还很难说,感觉方法有些偏执,应该有更好的解决方法。
第四种方法,只针对知道的iframe的ID调用 不推荐
function iframeAutoFit(iframeObj) { setTimeout(function() { if (!iframeObj) return; iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight: iframeObj.contentDocument.body.offsetHeight); }, 200) }
使用方法呢,大家在需要自适应的iframe上加个id,然后js执行就可以了
转自:http://www.jb51.net/article/15780.htm
发表评论
-
(转)js私有方法实现
2013-08-13 16:31 2745早些天写过 ... -
跨域通信常用的4种解决方案
2013-08-13 15:58 1380JavaScript由于同源策略的限制,跨域通信一直是棘手的 ... -
JS弹出窗口不给拦截的方法
2013-08-13 11:34 13114往往在真实开发中,我们需要跳到第三方的网站,如 ... -
JS中&&和||用法
2012-12-18 16:42 38814&&和||在JQuery源代码内尤为使用广泛, ... -
iframe的document.domain问题
2012-06-29 00:46 1406使用iframe引用外部资源是相当便捷的手段,不过仅 ... -
flash中as与js交互
2012-06-25 18:25 1116前段时间一直搞活动页面,趁着有空闲的时间总结下as ... -
trimpath 前端模板引擎
2012-05-06 19:49 3279Trimpath JavaScript 是个轻量级的 ... -
jquery两稳定版本比较~~
2012-05-05 15:49 64597jquery历经了多 ... -
(转)document.body.scrollTop与document.documentElement.scrollTop兼容
2012-04-28 15:00 2307这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这 ... -
(转)JS setTimeout延迟时间为0的详解 .
2012-04-10 14:48 7238由 John Resig 的 H ... -
(转)正则表达式
2012-03-25 23:30 1014正则表达式中的特殊字符 字符 含意 ... -
JS跨域获取数据
2012-03-14 11:48 5908项目中遇到一个需求,数据是通过跨域获取的,在百度查了下,跨域获 ... -
IE6下onmouseover、onmouseout导航问题解决
2012-03-13 00:20 3119从百度上搞下来的一段示例代码: function isMou ... -
(转)Array.prototype.slice.call自解
2012-03-04 22:50 7841为了研究Currying in Javascript,翻阅了很 ... -
很棒的WEB前端学习网站
2012-02-28 23:59 1769收藏下 http://www.css88.com/ -
META中X-UA-Compatible的用法
2012-02-08 11:56 9654<meta http-equiv = "X-U ... -
Http状态301和302的区别
2011-12-23 11:07 2909老是记不住这301和302的区别,经常混淆,特些查看网上相关信 ... -
Etag学习
2011-12-23 11:00 1095Etag是什么? ... -
html语义化(转)
2011-11-27 22:01 913作为一个前端开发人员 ...
相关推荐
iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度
iframe自适应高度和宽度
iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe...
iframe自适应高度(兼容多种浏览器) 亲测可以
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
纯JS实现的iframe自适应高度。兼容主流浏览器。
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
jquery对iframe自适应高度插件是国外下载下来的。插件使用只要引用js文件就行,不用做任何别的操作完全自动化。
iframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txt
因为有一个项目要用到iframe自适应高度,网上搜索了以下结果无数,不过看来看去都是那几个,而且基本都测试了一遍,所说的兼容根本不是那么回事,要不IE不正常,要不其他浏览器显示不正常,最后无奈,综合网上的方法...
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
多层嵌套iframe 自适应高度的解决方法
javascript iframe 自适应高度js demo
iframe自适应高度
iframe自适应高度 .doc
介绍: 填写的嵌入地址一定要和本页面在同一个站点上,否则会提示“拒绝访问!”。对跨域引用有权限问题,请查阅其他资料。
iframe自适应高度的简单解决办法,word文档中有详细的解释,赶快下载吧!
iframe自适应高度(DOM动态操作)
iframe自适应高度:根据屏幕的高度,自动增减。包括适应浏览器高度的改变。
iframe根据引用的页面内容自适应高度和宽度,直接查看例子,简单易操作