欢迎访问啄木鸟家庭维修
首页 > 家修学院 > 生活百科 > iframe 自适应高度
找附近维修师傅,快速上门预约  

iframe 自适应高度

2023-05-27 来源:啄木鸟家庭维修 596

  iframe 自适应高度也就是说基于界面美观和交互的考虑,很好的隐藏了iframe的border和scrollbar,让人看不出它是个iframe。那么iframe 自适应高度方法有哪些呢?下面就来简单介绍一下。

  iframe 自适应高度如说是始终都调用同一个固定高度的页面,我们直接写死iframe高度就可以了。而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了。

  如果iframe的高度没有确定,那将是初始的高度。

  iframe是网页中的一部分,其大小还要受到网页的限制,设置最高可以使用height=“100%”。

  基本上解决iframe超出的高度都是增加了滚动条来实现的,很简单,如果你iframe中的信息超出了一屏幕,你就必须使用滚动条了。

  开始用的时候还不行,后来发现是因为js跨域问题,没有权限。后来设置了window.document.domain 就可以了,用的是jquery代码2方法。

  跨域下的iframe自适应高度

  跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。

  方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。

  我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。

  a.html中包含iframe:

       

  在c.html中加入如下代码:

                        (function autoHeight(){        var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);        var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);        var c_iframe = document.getElementById(“c_iframe”);        c_iframe.src = c_iframe.src+”#”+b_width+”|”+b_height;     })();

  最后,agent.html中放入一段js:

                var b_iframe = window.parent.parent.document.getElementById(“Iframe”);        var hash_url = window.location.hash;        if(hash_url.indexOf(“#”)>=0){        var hash_width = hash_url.split(“#”)[1].split(“|”)[0]+”px”;        var hash_height = hash_url.split(“#”)[1].split(“|”)[1]+”px”;        b_iframe.style.width = hash_width;        b_iframe.style.height = hash_height;    }

  agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的同源限制)

  超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。

  下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。

  注意别放错地方了哦。

  下面是其他两种方法:

  iframe代码,注意要写ID

  jquery代码1:

  //注意:下面的代码是放在test.html调用

  $(window.parent.document).find(“#main”).load(function(){

  var main = $(window.parent.document).find(“#main”);

  var thisheight = $(document).height()+30;

  main.height(thisheight);

  });

  jquery代码2:

  //注意:下面的代码是放在和iframe同一个页面调用

  $(“#main”).load(function(){

  var mainheight = $(this).contents().find(“body”).height()+30;

  $(this).height(mainheight);

  });

  第二种有效,不过要注意一点是,增加的JS要写在iframe下面,放在头部是测试没有效果。

  测试代码:

  以上就是有关iframe 自适应高度的方法介绍,如果您有需要可以参考本文。

免责声明:本网站转載内容均注明出处,转載是出于传递更多信息之目的,井不意味成其观点或证实其内容真实性。转载稿涉及版权等问题,请 立即联系网站编辑,我们会予以更改或删除相关文章,保证您的权利
上一篇: Fn键在哪 下一篇: DOS命令
预约一下·服务到家
请选择地址
      获取验证码

      好师傅推荐

      马老师

      马老师

      最近已有2058人购买 联系TA
      刘师傅

      刘师傅

      最近已有1989人购买 联系TA
      李师傅

      李师傅

      最近已有1985人购买 联系TA

      热门问题

      前锋燃气灶维修

      前锋燃气灶维修的具体步骤可能因故障类型和具体情况而有所不同。以下是一般的维修步骤: 1. 故障排查:首先,确定燃气灶出现的问题。常见的故障包括点火困难、火焰不稳定、燃气泄漏等。检查燃气阀门是否打开,电池是否正常,火孔是否堵塞等。 2. 关闭燃气阀门:在进行任何维修操作之前,务必关闭燃气阀门,以确保安全。 3. 清洁和检查:如果点火困难或火焰不稳定,可能是火孔堵塞。使用细针或牙签清理火孔,确保燃气能

      2039次访问 查看详情

      附近的燃气灶维修

      如果你需要附近的燃气灶维修服务,你可以通过以下几种方式找到可靠的维修人员: - 在线搜索:使用搜索引擎,输入“附近的燃气灶维修”或相关关键词,加上你所在的地区或城市名称,如“北京附近的燃气灶维修”。搜索结果将显示附近的维修服务提供商的网站、电话号码和用户评价。 - 电话簿或黄页:查看当地的电话簿或黄页,找到“燃气灶维修”或“家电维修”类别下的相关条目。这些目录通常会列出附近的维修公司的联系信息。

      1743次访问 查看详情

      方太燃气灶火苗小是什么原因

      方太燃气灶火苗小可能有以下原因: 1. 燃气不足:检查燃气罐或燃气管道是否有足够的燃气供应。 2. 燃气阀门未完全打开:确保燃气阀门完全打开。 3. 火孔堵塞:清理燃烧器上的火孔,去除杂物和积碳。 4. 减压阀问题:减压阀故障可能导致燃气压力不足,影响火苗大小。 5. 燃气管道堵塞:检查燃气管道是否有堵塞或弯曲。 6. 风门调节不当:适当调整风门,使空气与燃气混合比例合适。 7. 燃烧器老化:长期

      1764次访问 查看详情

      洗衣机入水很小很慢

      洗衣机入水很小很慢可能由多种原因导致,以下是一些可能的解决方法: - 水压问题:如果家里的水压较低,可能会导致洗衣机入水很慢。可以检查其他水龙头的水流情况,如果水流也很小,可能需要联系物业或自来水公司解决水压问题。 - 水龙头问题:洗衣机的水龙头可能被堵塞或损坏,导致水流不畅。可以检查水龙头是否有杂物堵塞,或者更换水龙头。 - 进水阀问题:洗衣机的进水阀可能出现故障,导致进水缓慢。可以检查进水阀是

      1604次访问 查看详情

      洗衣机清洗费用一般多少钱

      洗衣机清洗费用因地区、洗衣机类型、清洗方式等因素而异,一般来说,波轮洗衣机清洗费用在 100-150 元左右,滚筒洗衣机清洗费用在 150-200 元左右。 需要注意的是,以上价格仅供参考,具体价格还需要根据当地的实际情况来确定。

      2204次访问 查看详情
      没有合适的?想获取更多维修报价,试试“在线客服