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执行就可以了
  • 相关阅读:
    阿里DatatX mysql8往 Elasticsearch 7 插入时间数据 时区引发的问题
    通俗易懂 k8s (3):kubernetes 服务的注册与发现
    ReplicaSet 和 ReplicationController 的区别
    使用Go module导入本地包
    k8s之statefulset控制器
    终于成功部署 Kubernetes HPA 基于 QPS 进行自动伸缩
    Atitit drmmr outline org stat vb u33.docx Atitit drmmr outline org stat v0 taf.docx Atitit drmmr out
    Atitit all diary index va u33 #alldiary.docx Atitit alldiaryindex v1 t717 目录 1. Fix 1 2. Diary deta
    Atitit path query 路径查询语言 数据检索语言 目录 1.1. List map >> spel 1 1.2. Html数据 》》Css选择符 1 1.3. Json 》map》
    Atitit prgrmlan topic--express lan QL query lan表达式语言 目录 1. 通用表达语言(CEL) 1 1.1. 8.2 功能概述 1 1.2. Ongl
  • 原文地址:https://www.cnblogs.com/top5/p/1674222.html
Copyright © 2011-2022 走看看