请问FF下如何取得IFRAME的scrollHeight？

Web 开发 > JavaScript
收藏 回复
[问题点数：200分，结帖人Novolee]
更多帖子
私信 空间 博客
李睿_Lee
等级
本版专家分：11225
结帖率 100%
为了自适应高度，需要取得IFRAME的scrollHeight。
只是在FF下，取得的值明显要小，不正确，不知道是何原因。
有兄弟姐妹知道吗？或者有其它方法取得IFrame的内容高吗？
讨论讨论。
在下一向喜欢自己动手解决问题，极少提问，今比较急，没时间好好研究，只好请教各位了。
高分送上。
谢谢。

注，页面带：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
只看楼主 引用 举报 楼主 收起
展开阅读全文
更多帖子
私信 空间 博客
adverse
等级
本版专家分：7969
勋章
Blank
红花 2007年4月 Web 开发大版内专家分月排行榜第一
看看这个
function iframeAutoFit()
   {
      try
      {
         if(window!=parent)
         {
         var a = parent.document.getElementsByTagName("IFRAME");
            for(var i=0; i<a.length; i++) //
            {
               if(a[i].contentWindow==window)
               {
                   var h = document.body.scrollHeight;
                   if(document.all) {h += 4;}
                   if(window.opera) {h += 1;}
                   a[i].style.height = h;
               }
            }
         }
      }
      catch (ex)
      {
         alert("脚本无法跨域操作！");
      }
   }
   if(document.attachEvent)  window.attachEvent("onload",  iframeAutoFit);  
   else  window.addEventListener('load',  iframeAutoFit,  false);
只看TA 引用 举报 #1得分 30
更多帖子
私信 空间 博客
mh_rock
等级
本版专家分：4460
mark  up
只看TA 引用 举报 #2得分 10
更多帖子
私信 空间 博客
李睿_Lee
等级
本版专家分：11225
回：adverse(King) 

你那代码在FF下，还是不能实现，高还是差了点，还会出现滚动条。
不过还是谢谢了。我看看能不能在你这基础上改改。
只看TA 引用 举报 #3得分 0
更多帖子
私信 空间 博客
李睿_Lee
等级
本版专家分：11225
我发现你那代码，不是取得的高值不对，而是IFrame的高根本没有改变成功。
不过因此我发现了另一个郁闷的问题，昨天晚上我也是用document.body.scrollHeight取的，怎么值就不对呢？今天早上看了你这代码，我又把昨天晚上的重试了下，值又是对的了，狂倒。。
但FF里如何根据这个用脚本来重设本IFrame的高呢？用adverse(King)的.style.height是不行了，没作用。
继续讨论。。。。
我也继续实验去。
只看TA 引用 举报 #4得分 0
更多帖子
私信 空间 博客
jacklinchen
等级
本版专家分：13730
document.body.scrollHeight直接取应该就行了
只看TA 引用 举报 #5得分 20
更多帖子
私信 空间 博客
adverse
等级
本版专家分：7969
勋章
Blank
红花 2007年4月 Web 开发大版内专家分月排行榜第一
var o=window.parent.document.getElementById("frameContainer");
if (o)
{
o.height = document.body.scrollHeight;
o.width = document.body.scrollWidth;
}
直接这样呢?
只看TA 引用 举报 #6得分 10
更多帖子
私信 空间 博客
adverse
等级
本版专家分：7969
勋章
Blank
红花 2007年4月 Web 开发大版内专家分月排行榜第一
在网上找到的一个解决办法:
<table>
<tr><td><div id="leftMenu"><!-- 左边的菜单 --></div></td>
<td id="frameContainer" ><iframe scrolling="no" frameborder="no" name="main"></td></tr>
</table>

设想是让iframe里面的页面去改变父窗口的iframe的高和宽。</p><p>以下是第一次尝试：

function dyjustifyframe()
{
var o =window.parent.document.getElementsByName("main")[0];
o.height= document.body.scrollHeight; 
o.width = document.body.scrollWidth;
}

把function dyjustifyframe()放在iframe中嵌套的子页面里，让子页面的body onLoad="dyjustifyframe()"。但是iframe并没有height和width属性，所以上面不能这样写。于是找到第二个方法。用修改 iframe 上级的table的大小来间接改变其大小。先给iframe加上

style="width:100%;height:100%"
使其随着外面table的大小改变而改变。于是把 dyjustifyframe()改成：

function dyjustifyframe()
{
var o=window.parent.document.getElementById("frameContainer");
if (o)
{
o.height = document.body.scrollHeight;
o.width = document.body.scrollWidth;
}
} 
上面的代码在ie中没问题，但在ff中调试时发现子页面的长度超出屏幕的话scrollHeight就只能变大不能变小，所以如果从一个长页面转到一个短页面的话父页面的长度不会改变。所以还需要修改一下。

function dyjustifyframe()
{
var o= window.parent.document.getElementById("frameContainer");
if (o)
{
if (navigator.appName == "Netscape")
{
o.height = document.body.offsetHeight + 40;
o.width = document.body.offsetWidth + 20;
}
else
{
o.height = document.body.scrollHeight;
o.width = document.body.scrollWidth;
}
}
}

要确保显示正常，还需要保证 frameContainer和leftMenu外面的td的大小没被设定，此外body的height必须是默认的auto，如果body是100%就会使代码失效。
只看TA 引用 举报 #7得分 10
更多帖子
私信 空间 博客
adverse
等级
本版专家分：7969
勋章
Blank
红花 2007年4月 Web 开发大版内专家分月排行榜第一
另外试试style 对象的 posHeight ， pixelHeight ，offsetHeight 有好使的没?
我这没ff,试不了
只看TA 引用 举报 #8得分 10
更多帖子
私信 空间 博客
李睿_Lee
等级
本版专家分：11225
谢谢楼上的兄弟。
我自己已经成功搞定了。
不过这才是FF和IE条件下的。
等下我下个其它常用的浏览器看看，行不行。
等都搞定了再发出来大家参考参考。
只看TA 引用 举报 #9得分 0
更多帖子
私信 空间 博客
李睿_Lee
等级
本版专家分：11225
算了，没时间，暂时不测试其它内核的浏览器了。
把我的代码贴出来先。

function   changeIframeHeight()  //自动改变 Iframe 的高度，加在Iframe页面的Onload
  {
if (top != self)
try
{
var h = document.body.scrollHeight;
if(document.all) {h += 4;}
if(window.opera) {h += 1;}
var hpx = h+'px';
window.parent.document.getElementsByTagName('iframe')[0].style.height = hpx;//我的页面中只一个嵌入
     }
catch(e)
{alert("脚本无法跨域操作！");}
  }


另外，由于我是用Div+CSS来布局的，所以要在iframe标签中加入以下代码，以防在FF中由于父标签的高不够而造成部分内容无法显示：
<div id="Content"><iframe src="profile.html" id="mainFrame" name="mainFrame" width="1000" frameborder="0" scrolling="auto" height="440" onload="changp(this);"></iframe></div>

changp()函数如下：

function changp(c){
c.parentNode.style.height=c.style.height;
}


欢迎有其它浏览器和朋友测试，提出问题，再讨论解决问题。
只看TA 引用 举报 #10得分 0
1 2 3
收起
收藏 回复
李睿_Lee

等级：

关注 私信 TA的帖子
设置Iframe的高度-获取窗口内部高度

//设置iframe的高度 function mainiframeResize(id){ var browerHeight = fnGetWidthHeight(); //通过ID得到iframe var iframe = document.getElementById(id); //得到iframe的自适应高度 ...

iframe自适应高度 document.body.scrollHeight取值不对

springmv 切换iframe 时发现直接修改iframe src 或者使用 location.href ...之后iframe自适应高度有出现了问题 子页面中使用document.body.scrollHeight获取的高度值不对   在iframe引用的前一个页面的高度比ifra...

获取Iframe页面高度并赋值给Iframe以及获取iframe里的元素

最近接手了别人的项目，别人用到了iframe，自己在实战中总结了一些关于iframe的小问题。 获取Iframe页面高度并赋值给Iframe Html <iframe name="container_ifranme" id="iframeId" scrolling="no" ...

同域及跨域下iframe高度自适应(兼容IE/FF/OP/Chrome)

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键，同时由于JavaScript对不同域名下权限的控制，引发出同域、跨域两种情况。 由于客户端js使用浏览器的同源安全策略，跨域情况下，被嵌套页面如果想...

内嵌框架iframe在火狐ff下自适高度（ie6、ie7、ff都正常）

1.脚本 在调用iframe的页面添加脚本 var FFextraHeight = 0; if(window.navigator.userAgent.indexOf("Firefox")>=1) ...//在火狐下的参数 可以调 } function ReSizeiFrame(iframe) { if(iframe && !window.oper

JS 关于浏览器之间 scrollHeight offsetHeight (比如 iframe自适应高度时...)

关于clientHeight、offsetHeight、scrollHeightwindow.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值)...

iframe自适应及offsetHeight/Width+scrollHeight/Width区别

scrollHeight, scrollWidth:返回元素的完整的高度和宽度，以像素为单位。当一个元素拥有滚动条时（比如由于CSS的 overflow 属性），这些属性和offsetHeight与offsetWidth不同，offsetHeight 和 offsetWidth 只是报告...

IE FF 兼容的IFRAME 自适应高度JS代码

function SetCwinHeight() {... var iframeid = document.getElementById("EnterpriseCard"); //iframe id  if (document.getElementById) {  if (iframeid && !window.opera) {  i

再谈iframe自适应高度

通过Google搜索iframe 自适应高度，结果5W多条，搜索iframe 高度自适应，结果2W多条。我翻了前面的几十条，刨去大量的转载，有那么三五篇是原创的。而这几篇原创里面，基本上只谈到如何自适应静的东西，就是没有考虑...

//iframe自适应高度[在IE6 IE7 FF下测试通过]

js code://iframe自适应高度[在IE6 IE7下测试通过] function reSetIframe(){ var iframe = document.getElementById("iframeId"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; v

iframe自适应高度(支持XHTML，支持FF)

先说明，这个办法只限于iframe中的子页面也是本地页面（不能引用外网页面）======方法=====第一步 js部分function getSize() {var xScroll, yScroll;if (window.innerHeight && window.scrollMaxY) {xScroll = ...

设置iframe自适应高度(/*兼容FF/IE9/IE8/IE7/IE6*)

function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; if(ifm != null && subWe

用javascript动态调整iframe高度【兼容ie&FF】【转】

当你在页面上使用了iframe之后，一般来说会不希望iframe显示难看的滚动条，以使iframe里面的内容和主页面的内容浑然一体。这时候你会设置 scrolling="no" 属性。但是这样一来如果iframe里面的内容是变化的，高度会随...

iframe高度自适应，兼容IE,FF

原文：http://www.shareme.cn/blog/article.asp?id=332  function SetCwinHeight(iframeObj){ if (document.getElementById){ if (iframeObj && !window.opera){ if (iframeObj.contentDocument

iframe框架套iframe页面滚动条的问题，一切没问题，就差在FF个IE7上测试了~

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档body { margin-left: 0px; margin-top: 0px; margin-right: 0px;... background-color: #33CCFF;}

实现iFrame自适应高度，原来很简单！

iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm">iframe>看到了吧，关键就在于onload="this.height=iFrame1.document....

跨域iframe高度自适应（兼容IE/FF/OP/Chrome）

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键，同时由于JavaScript对不同域名下权限的控制，引发出同域、跨域两种情况。 　由于客户端js使用浏览器的同源安全策略，跨域情况下，被嵌套页面如果想...

js操作iframe的div移动 | 兼容FF+IE

 * 新增加的功能:初始化参数，参数包括iframe的document和window,对于html,可以使用document操作，函数方法，可以使用window操作  */ var ifDoc = null; var ifWin = null; initIframeParam = function(){  ...

Iframe自适应高度_IE_FF下都可用

<script type="text/javascript">function SetCwinHeight(){ var bobo=document.getElementById("bobo"); //iframe id if (document.getElementById){ if (bobo && !window.opera){ i...

iframe IE FF高度自适应

前台：  onload="javascript:SetCwinHeight(this);" marginheight="0" marginwidth="0" scrolling="auto"  align="middle" src="">     apply.js页面： func

iframe 自适应高度[ff,ie下大同小异]

法一：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="...&

真正的iframe高度自适应(兼容IE,FF,Opera)

function SetCwinHeight(obj) {  var cwin=obj;  if (document.getElementById)  {  if (cwin && !window.opera)  {  if (cwin.

iframe 用法总结

iframe元素用法总结 url:http://www.cnblogs.com/rubylouvre/archive/2009/08/01/1536710.html iframe是...但是它又是一个特别的元素，最早出现IE4.0中，后纷纷被其他游览器吸纳，由于IE不开源，iframe在各游览器中都

完美iframe自适应宽度和高度（支持ie,ff）

<!-- function TuneHeight(fm_name,fm_id){ var frm=document.getElementById(fm_id); var subWeb=document.frames?document.frames[fm_name].document:frm.contentDocument; if(frm !=

js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)

iframe的高度一直是让人头疼的问题。今天因为有个项目需要用到。再把这个问题找了一遍,但是还是发现了FF不兼容的错误（提示错误： document.frames is undefined）！ 在这里我把这个问题彻底解决了。希望...

★★ 总结：获取 Iframe内的元素对象,兼容ie、firefox

为兼容ie、firefox特别做了如下处理： if(navigator.appName == "Netscape") {//firefox等兼容 document.getElementById("historyframe").contentDocument.getElementById("ChatList").innerHTML +="abc";...

JS在IE和FF下不兼容的问题及部分解决办法

下面列出JS在IE和FF下不兼容的方法 1、Dom操作 var wrongGet = obj.firstChild; var wrongGet = obj.lastChild; var wrongGet = obj.nextSibling; var wrongGet = obj.childNodes; var wrongGet = obj....

再谈Iframe 自动适应高度

方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。在代码维护角度...

iframe自适应高度，Iframe显示不完整

iframe在浏览器中不怎么好，高度问题或者说显示问题经常出现，而且在不同的浏览器表现方式各不相同，特别让人纠结。但可以通过js改变Iframe的高度。   js代码： function setIframeHeight(iframeId){ var cwin...

jdk1.8 64位官方正式版 jdk-8u91-windows

jdk1.8 64位官方正式版 jdk-8u91-windows

相关热词 c#编译器 学习 c#和其他语言相比 c# 什么是管道 c# 在ui线程中运行 c# 动态增加枚举 c# panel边框 c#调用dll报错 c# 编写dll c# dll修复工具 c# timer 多线程