zoukankan      html  css  js  c++  java
  • 真正的iframe高度自适应(兼容IE,FF,Opera)

    由于项目上的需要,要用一个iframe高度自适应的功能

    在google上搜了很久

    找到了下面这个js

    function SetCwinHeight(obj)
    {
      
    var cwin=obj;
      
    if (document.getElementById)
      {
        
    if (cwin && !window.opera)
        {
          
    if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
            cwin.height 
    = cwin.contentDocument.body.offsetHeight + 20
          
    else if(cwin.Document && cwin.Document.body.scrollHeight)
            cwin.height 
    = cwin.Document.body.scrollHeight + 10;
        }
      }
    }

    然后……

    进入了测试过程(调用很简单,先略过)

    1.IE ---通过   但是高度还是有稍微的差距,很小,滚动条还在

    2.FF --- 通过  与IE一样,有小差距

    3.Opera --- 看那个JS的条件就知道,通不过的

    但主流浏览器至少要通过这三项撒!!!

    于是,还是Google

    搜索 各浏览器在处理 document.scrollHeight 或者 offsetHeigth时的特殊现象

    发现,Opera浏览器在处理iframe内容的时候,用的是contentWindow

    而处理内容高度的时候,却与IE一致

    从而,有了下面这段js

    <html>
    <head>
    <script>
    function SetCwinHeight(obj)
    {
      
    var cwin=obj;
      
    if (document.getElementById)
      {
        
    if (cwin && !window.opera)
        {
          
    if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
            cwin.height 
    = cwin.contentDocument.body.offsetHeight + 20//FF NS
          else if(cwin.Document && cwin.Document.body.scrollHeight)
            cwin.height 
    = cwin.Document.body.scrollHeight + 10;//IE
        }
        
    else
        {
            
    if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)
                cwin.height 
    = cwin.contentWindow.document.body.scrollHeight;//Opera
        }
      }
    }
    </script>
    </head>
    <body>
    <iframe src="20103622440.html" onload="SetCwinHeight(this);" width="600px">
    </body>
    </html>

    这样一来,总算把这三个浏览器给适应了

    做为程序员,还是要细心点

    再测试一下

    OK...3个浏览器均正常显示,也无iframe的纵向滚动条了

    小弟我初次发Blog文

    大家莫拍我啊~:)

  • 相关阅读:
    idou老师教你学Istio 08: 调用链埋点是否真的“零修改”?
    idou老师教你学Istio 07: 如何用istio实现请求超时管理
    idou老师教你学Istio06: 如何用istio实现流量迁移
    Strusts2笔记8--文件的上传和下载
    Strusts2笔记7--国际化
    Strusts2笔记6--拦截器
    Strusts2笔记5--数据验证
    Strusts2笔记4--类型转换器
    Struts2笔记3--获取ServletAPI和OGNL与值栈
    Struts2笔记2--动态方法调用和Action接收请求方式
  • 原文地址:https://www.cnblogs.com/xjfhnsd/p/1679976.html
Copyright © 2011-2022 走看看