zoukankan      html  css  js  c++  java
  • iframe自适应高度的多种方法方法小结

    第一中方法批量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执行就可以了
  • 相关阅读:
    oracle 索引失效的原因
    输入英文查找出十个出现频率最高的单词
    记录最近在使用sprintf构造字符串时遇到的一个问题
    ADO.NET对象模型
    MySQL5.0中文手册(13.1. 数据定义声明)
    2005年中国软件产业最大规模前100家企业名单
    妹妹生了个女儿,纪念一下
    数组定义的疑问
    短期目标
    做项目的一点收获之二
  • 原文地址:https://www.cnblogs.com/top5/p/1674222.html
Copyright © 2011-2022 走看看