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

电玩女神 2021-12-16 08:41 134阅读 0赞

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="提交" οnclick="javascript:gotoSubmit()"/>  
    ...  
    <script language="javascript">  
    function gotoSubmit() \{  
    ...  
    alert(window.event);    // use window.event  
    ...  
    \}  
    </script>  
    新代码(可在IE和MF中运行)：  
    <input type="button" name="someButton" value="提交" οnclick="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就直接写&不要写&例如var url = ’xx.jsp?objectName=xx&objectEvent=xxx’;  
    frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器  
    一般会服务器报错参数没有找到  
    当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&  
    一般MF无法识别js中的&  
    
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等) #

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" οnlοad="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][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_a.html] ，被包含页面 [iframe\_b.htm][iframe_b.htm] 和 [iframe\_c.html][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_a.html] ，被包含页面 [iframe\_b.htm][iframe_b.htm] 和 [iframe\_c.html][iframe_c.html]

主页面代码示例：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 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">

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 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>

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 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, 红色 = 错误值, 绿色 = 正确值）

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 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的添加 οnlοad=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。  
这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。  
在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 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_a.html] ，被包含页面 [iframe\_b.htm][iframe_b.htm] 和 [iframe\_c.html][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 >

转载于:https://www.cnblogs.com/neru/archive/2011/01/08/1930463.html

[http_www.mozilla.org_docs_dom_domref_dom_shortTOC.html]: http://www.mozilla.org/docs/dom/domref/dom_shortTOC.html
[iframe_a.html]: http://ued.koubei.com/wp-content/iframe_a.html
[iframe_b.htm]: http://ued.koubei.com/wp-content/iframe_b.html
[iframe_c.html]: http://ued.koubei.com/wp-content/iframe_c.html
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211214/6152a8b339144882814bd35cc2b07ac3.png