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执行就可以了
  • 相关阅读:
    windows server2012之部署HTTPS安全站点
    HTTPS站点搭建教程:Win7/Windows Server 2008R2
    https,https的本地测试环境搭建,asp.net结合https的代码实现,http网站转换成https网站之后遇到的问题
    SQL Server中解决死锁的新方法介绍
    WCF寄宿到Windows Service[1]
    安装程序工具 (Installutil.exe)22
    安装程序工具 (Installutil.exe)
    WebSocket使用教程
    深入理解java String 对象的不可变性
    Android 给Button加个监听
  • 原文地址:https://www.cnblogs.com/top5/p/1674222.html
Copyright © 2011-2022 走看看