20110107 学习记录：动态指定iframe的scr属性 & IE和Firefox的js兼容性整理 & iframe自适应高度

ie和firefox下都可以通过

1.document.getElementById("abc").src=url;

2.window.frames['name'].document.location.href=url；

的方式来给iframe指定加载的页面值，

但是在火狐下，event.returnValue = false/window.event.returnValue = false 是失效的，也就是说，没法控制住服务器控件的回发。

可以用下面的方法来控制火狐下服务器端控件的回发

if(window.event)

{

　　window.event.returnValue = false;

}

else{

 　　e.preventDefault();

　　}

 

---

另，关于ie与firefox的不同之处——xxd，这些个浏览器就不能给程序员省点心，大家统一个说法么！！程序员开发点东西容易么？除了要考虑实现各种bt的要求，成天还得想着各个浏览器的兼容问题.......  = =+

 

 

IE和Firefox的js兼容性整理

以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox

1. document.form.item 问题
   (1)现有问题：
   现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行
   (2)解决方法：
   改用 document.formName.elements["elementName"]
   (3)其它
   参见 2
   
2. 集合类对象问题
   (1)现有问题：
   现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
   (2)解决方法：
   改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。
   又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
   (3)其它
   
3. window.event
   (1)现有问题：
   使用 window.event 无法在 MF 上运行
   (2)解决方法：
   MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
   原代码(可在IE中运行)：
   <input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
   ...
   <script language="javascript">
   function gotoSubmit() {
   ...
   alert(window.event);    // use window.event
   ...
   }
   </script>
   新代码(可在IE和MF中运行)：
   <input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
   ...
   <script language="javascript">
   function gotoSubmit(evt) {
   evt = evt ? evt : (window.event ? window.event : null);
   ...
   alert(evt);             // use evt
   ...
   }
   </script>
   此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。
   
4. HTML 对象的 id 作为对象名的问题
   (1)现有问题
   在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
   (2)解决方法
   用 getElementById("idName") 代替 idName 作为对象变量使用。
   
5. 用idName字符串取得对象的问题
   (1)现有问题
   在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
   (2)解决方法
   用 getElementById(idName) 代替 eval(idName)。
   
6. 变量名与某 HTML 对象 id 相同的问题
   (1)现有问题
   在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
   (2)解决方法
   在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
   此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
   (3)其它
   参见 问题4
   
7. event.x 与 event.y 问题
   (1)现有问题
   在IE 中，event 对象有 x, y 属性，MF中没有。
   (2)解决方法
   在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
   故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
   event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。
   
   如果要完全一样，可以稍麻烦些：
   mX = event.x ? event.x : event.pageX;
   然后用 mX 代替 event.x
   (3)其它
   event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。
   
8. 关于frame
   (1)现有问题
   在 IE中 可以用window.testFrame取得该frame，mf中不行
   (2)解决方法
   在frame的使用方面mf和ie的最主要的区别是：
   如果在frame标签中书写了以下属性：
   <frame src="xx.htm" id="frameId" name="frameName" />
   那么ie可以通过id或者name访问这个frame对应的window对象
   而mf只可以通过name来访问这个frame对应的window对象
   例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
   ie： window.top.frameId或者window.top.frameName来访问这个window对象
   mf： 只能这样window.top.frameName来访问这个window对象
   另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
   并且可以通过window.top.document.getElementById("testFrame").src = ’xx.htm’来切换frame的内容
   也都可以通过window.top.frameName.location = ’xx.htm’来切换frame的内容
   关于frame和window的描述可以参见bbs的‘window与frame’文章
   以及/test/js/test_frame/目录下面的测试
   ----adun 2004.12.09修改
   
9. 在mf中，自己定义的属性必须getAttribute()取得
   
10. 在mf中没有  parentElement parement.children  而用
    parentNode parentNode.childNodes
    childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
    一般可以通过node.getElementsByTagName()来回避这个问题。
    当html中节点缺失时，IE和MF对parentNode的解释不同，例如
    <form>
    <table>
    <input/>
    </table>
    </form>
    MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
    MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
    
11. const 问题
    (1)现有问题:
    在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
    (2)解决方法:
    不使用 const ，以 var 代替。
    
12. body 对象
    MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在
    
13. url encoding
    在js中如果书写url就直接写&不要写&amp;例如var url = ’xx.jsp?objectName=xx&amp;objectEvent=xxx’;
    frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
    一般会服务器报错参数没有找到
    当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&amp;
    一般MF无法识别js中的&amp;
    
14. nodeName 和 tagName 问题
    (1)现有问题：
    在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
    有问题（具体情况没有测试，但我的IE已经死了好几次）。
    (2)解决方法：
    使用 tagName，但应检测其是否为空。
    
    
15. 元素属性
    IE下 input.type属性为只读，但是MF下可以修改
    
16. document.getElementsByName() 和 document.all[name] 的问题
    (1)现有问题：
    在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。 

 

http://www.iwms.net/n1918c17.aspx

---

 

 

firefox实现ie的方法和属性(insertAdjacentElement等)

 

<script language="JavaScript" type="Text/JavaScript">
<!--
if(window.Event){// 修正Event的DOM
    /*
                                IE5        MacIE5        Mozilla        Konqueror2.2        Opera5
    event                        yes        yes            yes            yes                    yes
    event.returnValue            yes        yes            no            no                    no
    event.cancelBubble            yes        yes            no            no                    no
    event.srcElement            yes        yes            no            no                    no
    event.fromElement            yes        yes            no            no                    no
    
    */
    Event.prototype.__defineSetter__("returnValue",function(b){// 
        if(!b)this.preventDefault();
        return b;
        });
    Event.prototype.__defineSetter__("cancelBubble",function(b){// 设置或者检索当前事件句柄的层次冒泡
        if(b)this.stopPropagation();
        return b;
        });
    Event.prototype.__defineGetter__("srcElement",function(){
        var node=this.target;
        while(node.nodeType!=1)node=node.parentNode;
        return node;
        });
    Event.prototype.__defineGetter__("fromElement",function(){// 返回鼠标移出的源节点
        var node;
        if(this.type=="mouseover")
            node=this.relatedTarget;
        else if(this.type=="mouseout")
            node=this.target;
        if(!node)return;
        while(node.nodeType!=1)node=node.parentNode;
        return node;
        });
    Event.prototype.__defineGetter__("toElement",function(){// 返回鼠标移入的源节点
        var node;
        if(this.type=="mouseout")
            node=this.relatedTarget;
        else if(this.type=="mouseover")
            node=this.target;
        if(!node)return;
        while(node.nodeType!=1)node=node.parentNode;
        return node;
        });
    Event.prototype.__defineGetter__("offsetX",function(){
        return this.layerX;
        });
    Event.prototype.__defineGetter__("offsetY",function(){
        return this.layerY;
        });
    }
if(window.Document){// 修正Document的DOM
    /*
                                IE5        MacIE5        Mozilla        Konqueror2.2        Opera5
    document.documentElement    yes        yes            yes            yes                    no
    document.activeElement        yes        null        no            no                    no
    
    */
    }
if(window.Node){// 修正Node的DOM
    /*
                                IE5        MacIE5        Mozilla        Konqueror2.2        Opera5
    Node.contains                yes        yes            no            no                    yes
    Node.replaceNode            yes        no            no            no                    no
    Node.removeNode                yes        no            no            no                    no
    Node.children                yes        yes            no            no                    no
    Node.hasChildNodes            yes        yes            yes            yes                    no
    Node.childNodes                yes        yes            yes            yes                    no
    Node.swapNode                yes        no            no            no                    no
    Node.currentStyle            yes        yes            no            no                    no
    
    */
    Node.prototype. replaceNode=function(Node){// 替换指定节点
        this.parentNode.replaceChild(Node,this);
        }
    Node.prototype. removeNode=function(removeChildren){// 删除指定节点
        if(removeChildren)
            return this.parentNode.removeChild(this);
        else{
            var range=document.createRange();
            range.selectNodeContents(this);
            return this.parentNode.replaceChild(range.extractContents(),this);
            }
        }
    Node.prototype. swapNode=function(Node){// 交换节点
        var nextSibling=this.nextSibling;
        var parentNode=this.parentNode;
        node.parentNode.replaceChild(this,Node);
        parentNode.insertBefore(node,nextSibling);
        }
    }
if(window.HTMLElement){
    HTMLElement.prototype.__defineGetter__("all",function(){
        var a=this.getElementsByTagName("*");
        var node=this;
        a.tags=function(sTagName){
            return node.getElementsByTagName(sTagName);
            }
        return a;
        });
    HTMLElement.prototype.__defineGetter__("parentElement",function(){
        if(this.parentNode==this.ownerDocument)return null;
        return this.parentNode;
        });
    HTMLElement.prototype.__defineGetter__("children",function(){
        var tmp=[];
        var j=0;
        var n;
        for(var i=0;i<this.childNodes.length;i++){
            n=this.childNodes[i];
            if(n.nodeType==1){
                tmp[j++]=n;
                if(n.name){
                    if(!tmp[n.name])
                        tmp[n.name]=[];
                    tmp[n.name][tmp[n.name].length]=n;
                    }
                if(n.id)
                    tmp[n.id]=n;
                }
            }
        return tmp;
        });
    HTMLElement.prototype.__defineGetter__("currentStyle", function(){
        return this.ownerDocument.defaultView.getComputedStyle(this,null);
        });
    HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){
        var r=this.ownerDocument.createRange();
        r.setStartBefore(this);
        var df=r.createContextualFragment(sHTML);
        this.parentNode.replaceChild(df,this);
        return sHTML;
        });
    HTMLElement.prototype.__defineGetter__("outerHTML",function(){
        var attr;
        var attrs=this.attributes;
        var str="<"+this.tagName;
        for(var i=0;i<attrs.length;i++){
            attr=attrs[i];
            if(attr.specified)
                str+=" "+attr.name+’="’+attr.value+’"’;
            }
        if(!this.canHaveChildren)
            return str+">";
        return str+">"+this.innerHTML+"</"+this.tagName+">";
        });
    HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){
        switch(this.tagName.toLowerCase()){
            case "area":
            case "base":
            case "basefont":
            case "col":
            case "frame":
            case "hr":
            case "img":
            case "br":
            case "input":
            case "isindex":
            case "link":
            case "meta":
            case "param":
                return false;
            }
        return true;
        });

    HTMLElement.prototype.__defineSetter__("innerText",function(sText){
        var parsedText=document.createTextNode(sText);
        this.innerHTML=parsedText;
        return parsedText;
        });
    HTMLElement.prototype.__defineGetter__("innerText",function(){
        var r=this.ownerDocument.createRange();
        r.selectNodeContents(this);
        return r.toString();
        });
    HTMLElement.prototype.__defineSetter__("outerText",function(sText){
        var parsedText=document.createTextNode(sText);
        this.outerHTML=parsedText;
        return parsedText;
        });
    HTMLElement.prototype.__defineGetter__("outerText",function(){
        var r=this.ownerDocument.createRange();
        r.selectNodeContents(this);
        return r.toString();
        });
    HTMLElement.prototype. attachEvent=function(sType,fHandler){
        var shortTypeName=sType.replace(/on/,"");
        fHandler._ieEmuEventHandler=function(e){
            window.event=e;
            return fHandler();
            }
        this.addEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
        }
    HTMLElement.prototype. detachEvent=function(sType,fHandler){
        var shortTypeName=sType.replace(/on/,"");
        if(typeof(fHandler._ieEmuEventHandler)=="function")
            this.removeEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
        else
            this.removeEventListener(shortTypeName,fHandler,true);
        }
    HTMLElement.prototype. contains=function(Node){// 是否包含某节点
        do if(Node==this)return true;
        while(Node=Node.parentNode);
        return false;
        }
    HTMLElement.prototype. insertAdjacentElement=function(where,parsedNode){
        switch(where){
            case "beforeBegin":
                this.parentNode.insertBefore(parsedNode,this);
                break;
            case "afterBegin":
                this.insertBefore(parsedNode,this.firstChild);
                break;
            case "beforeEnd":
                this.appendChild(parsedNode);
                break;
            case "afterEnd":
                if(this.nextSibling)
                    this.parentNode.insertBefore(parsedNode,this.nextSibling);
                else
                    this.parentNode.appendChild(parsedNode);
                break;
            }
        }
    HTMLElement.prototype. insertAdjacentHTML=function(where,htmlStr){
        var r=this.ownerDocument.createRange();
        r.setStartBefore(this);
        var parsedHTML=r.createContextualFragment(htmlStr);
        this.insertAdjacentElement(where,parsedHTML);
        }
    HTMLElement.prototype. insertAdjacentText=function(where,txtStr){
        var parsedText=document.createTextNode(txtStr);
        this.insertAdjacentElement(where,parsedText);
        }
    HTMLElement.prototype. attachEvent=function(sType,fHandler){
        var shortTypeName=sType.replace(/on/,"");
        fHandler._ieEmuEventHandler=function(e){
            window.event=e;
            return fHandler();
            }
        this.addEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
        }
    HTMLElement.prototype. detachEvent=function(sType,fHandler){
        var shortTypeName=sType.replace(/on/,"");
        if(typeof(fHandler._ieEmuEventHandler)=="function")
            this.removeEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
        else
            this.removeEventListener(shortTypeName,fHandler,true);
        }
    }
//-->
</script>

 

http://www.iwms.net/n1945c17.aspx

 

---

http://hi.baidu.com/lanxigang/blog/item/41dbbc3820db2fcad46225ed.html

window.event.returnValue在IE和FireFox下的兼容写法

 

在ie下习惯用returnValue了，可是到了ff却用不了，郁闷……

瞎折腾一番，终于搞了个兼容的方法，如释重负。。。。

以下是我写的一段输入电话号码的js，注意其中黑体部分。

js其实还是挺灵活的，直接用 if(window.event)它也能正常工作，还好

对应于ie下的event.returnValue，FF中的是方法e.preventDefault()。代码如下

    function keyDown(e)
    {
        e = window.event || e;  
        var k = e.keyCode || e.which;  

        if ((k==46)||(k==8)|| (k>=48 && k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40)||(k==189))
        {
            if(str.indexOf('-')!=-1 && (k==189))
            {
                if(window.event)
                   window.event.returnValue = false;
                else
                    e.preventDefault();//for firefox
            }
        }
        else if((k==190)||(k==110))
        {
            if(window.event)
               window.event.returnValue = false;
            else
                e.preventDefault();//for firefox
        }
        else
        {
            if(window.event)
               window.event.returnValue = false;
            else
                e.preventDefault();//for firefox
        }
    }

---

Firefox的IFrame编程[原创]

                                       前天接到一个任务，在向一个输入框输入时，动态从服务器获取辅助录入数据。很简单想到使用IFrame实现(当然也可以使用httpRequest，但我只是使用Notepad没有server所以选择IFrame)。
于是简单的写下如下代码：

<iframe  style="display:none;" id="dataLoader" onload="getData()"></iframe>
function getData(){
        var d=document.getElementById("dataLoader").document;
        var data=d.getElementById("list");
        //...
        //以下省略
        //...
}

当我使用IE时没有问题，但使用Firefox时有问题，:(.
我跟踪发现document.getElementById("dataLoader").document返回是空值。
紧接着我发现ff中document.getElementById("dataLoader")的类型是Frame，于是网上一通查，o终于找到
http://www.mozilla.org/docs/dom/domref/dom_shortTOC.html
过去我一直郁闷没有mozilla手册，现在好了，找到了。
由frame我找到
 var d=document.getElementById("dataLoader").document;
 应改为
  var d=document.getElementById("dataLoader").contentWindow.document；
 
  contentWindow属性可以返回Frame中的window；可是MSDN中也这个属性，但不写也可以，嗨IE中可能有默认属性吧。

另外：可以使用
window.frames["frameName"].document语法直接获取frame里的document对象.

 

 

 

---

 

 

http://ued.koubei.com/?p=243

再谈iframe自适应高度 By 大米

这贴比较长，没有耐性的朋友请直接拖到帖子末尾的代码示例，或者直接去玩我提供的Demo。

Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html

下面开始讲：

通过Google搜索iframe 自适应高度，结果5W多条，搜索iframe 高度自适应，结果2W多条。
我翻了前面的几十条，刨去大量的转载，有那么三五篇是原创的。而这几篇原创里面，基本上只谈到如何自适应静的东西，就是没有考虑到JS操作DOM之后，如何做动态同步的问题。另外，在兼容性方面，也研究的不彻底。

这篇文章，希望在这两个方面再做一些深入。

可能有人还没接触到这个问题过，先说明一下，什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了 iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死 iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实 际高度了。

顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。

传统做法大致有两个：
方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。
方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。
在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。

两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。

如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。

Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html

主页面代码示例：

 

html

< iframe  id ="frame_content"  src ="iframe_b.html"  scrolling ="no"  frameborder ="0" ></ iframe >< script  type ="text/javascript" >

function  reinitIframe(){

var  iframe  =  document.getElementById( " frame_content " );

try {

iframe.height  =   iframe.contentWindow.document.documentElement.scrollHeight;

} catch  (ex){}

}

window.setInterval( " reinitIframe() " ,  200 );

</ script >

一直执行，效率会不会有问题？
我做了测试，同时开5个窗口（IE6、IE7、FF、Opera、Safari）执行这个代码，不会对CPU有什么影响，甚至调整到2ms，也没影响（基本维持在0%占用率）。

下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对body.scrollHeight和 documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype，不同的doctype应该不会影响结果，但 是假如你的页面没有申明doctype，那还是先去加一个吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

在主页面追加以下测试代码，以输出这两个值，代码示例：

js

< div >< button onclick = " checkHeight() " > Check Height < / button>< / div >< script type = " text/javascript " >

function  checkHeight() {

var  iframe  =  document.getElementById( " frame_content " );

var  bHeight  =  iframe.contentWindow.document.body.scrollHeight;

var  dHeight  =  iframe.contentWindow.document.documentElement.scrollHeight;

alert( " bHeight: "   +  bHeight  +   " , dHeight: "   +  dHeight);

}

< / script>

被加载页面，可以切换一个绝对定位的层，来使页面高度动态改变。如果层展开，则会撑高页面高度。代码示例：

 

code

< div >< button onclick = " toggleOverlay() " > Toggle Overlay < / button>

< / div>

< div style = " height:160px;position:relative " >

< div id = " overlay "  style = " position:absolute;width:280px;height:280px;display:none; " >< / div>

< / div>

< script type = " text/javascript " >

function  toggleOverlay() {

var  overlay  =  document.getElementById( ' overlay ' );

overlay.style.display  =  (overlay.style.display  ==   ' none ' )  ?   ' block '  :  ' none ' ;

}

< / script>

下面列出以上代码在各浏览器的测试值：
（bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 红色 = 错误值, 绿色 = 正确值）

/	层隐藏时		层展开时
	bHeight	dHeight	bHeight	dHeight
IE6	184	184	184	303
IE7	184	184	184	303
FF	184	184	184	303
Opera	181	181	300	300
Safari	184	184	303	184

暂且无视Opera比别人少3像素的问题…可以看出，如果没有绝对定位的东西，两个值是相等的，取哪个都无所谓。
但是如果有，那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了：

 

js

function  reinitIframe(){ var  iframe  =  document.getElementById( " frame_content " );

try {

var  bHeight  =  iframe.contentWindow.document.body.scrollHeight;

var  dHeight  =  iframe.contentWindow.document.documentElement.scrollHeight;

var  height  =  Math.max(bHeight, dHeight);

iframe.height  =   height;

} catch  (ex){}

}

window.setInterval( " reinitIframe() " ,  200 );

这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。

如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值 184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。
可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法 在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 onload=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。
这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。
在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。

这是最终的主页面的代码：

js

< iframe id = " frame_content "  src = " iframe_b.html "  scrolling = " no "  frameborder = " 0 "  onload = " this.height=100 " >< / iframe>

< script type = " text/javascript " >

function  reinitIframe(){

var  iframe  =  document.getElementById( " frame_content " );

try {

var  bHeight  =  iframe.contentWindow.document.body.scrollHeight;

var  dHeight  =  iframe.contentWindow.document.documentElement.scrollHeight;

var  height  =  Math.max(bHeight, dHeight);

iframe.height  =   height;

} catch  (ex){}

}

window.setInterval( " reinitIframe() " ,  200 );

< / script>

 

附Demo页面： 主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html

如果只考虑FX和IE，并且，iframe里面内容也不进行DOM操作，那仍然可以用最简单的传统处理方式：

 

< iframe  id ="frame_content"  src ="iframe_b.html"  scrolling ="no"  frameborder ="0"  onload ="this.height=this.contentWindow.document.documentElement.scrollHeight" ></ iframe >