获取iframe实际高度

要解决的问题:iframe初始高度太小。想根据页面内容,自动撑开

HTML代码:

<iframe id="frame-content" scrolling="auto"  src="你的网页地址" frameborder="0"></iframe>

在iframe同页面 => JS代码:

// iframe自适应会用到
  function calcPageHeight(doc) {
    var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
    var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
    var height = Math.max(cHeight, sHeight)
    return height
  }

  var ifr = document.getElementById('frame-content')
  ifr.onload = function () {
    var iDoc = ifr.contentDocument || ifr.document || ifr.contentWindow
    var height = calcPageHeight(iDoc);
    ifr.style.height = height + 'px'
  }

注:
1、在使用这种方法之前,需要注意一个跨域的问题,被iframe引入的页面必须为同域页面。不然会报错

2、有时候本地调试的时候,比如打开的文件在浏览器开头为 file:// 浏览器也会默认为跨域页面,这时候只需要自己搭建一个服务器环境(phpstudy之类的都可以)。就可以了

3、有时候可能需要改变iframe的内容,比如iframe中引入的A页面,高度为1000px、而B页面高度只有500px、这时候切换的时候,B页面即使重新计算了高度,也不会生效,默认继承了A页面的1000px、所以在切换页面的时候,最好就是手动设置一下iframe的高度,在进行计算。


**THE END**
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
在HTML中,`iframe`用于嵌入另一个网页内容。如果你想要在`iframe`加载完成后获取高度,你可以使用`onload`事件和JavaScript。以下是一个简单的示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IFrame Height Example</title> </head> <body> <div id="container"> <iframe id="myIframe" src="https://example.com" style="display:none;"></iframe> </div> <script> // 获取iframe元素 var iframe = document.getElementById("myIframe"); // 当iframe完成加载时触发 iframe.onload = function() { // 获取iframe实际高度 var iframeHeight = iframe.contentWindow.document.body.offsetHeight; // 或者使用innerHeight属性(包括滚动条的高度) // var iframeHeight = iframe.contentWindow.document.documentElement.offsetHeight; // 更新或使用这个高度值 console.log('IFrame height is:', iframeHeight); // 在这里你可以将iframe高度设置到某个元素或者执行其他操作 document.getElementById("container").style.height = iframeHeight + 'px'; }; </script> </body> </html> ``` 在这个例子中,`onload`事件会在`iframe`的内容完全加载后被触发。然后,你可以通过`contentWindow`属性获取`iframe`加载的内容页面的window对象,进而获取`body`或`documentElement`的高度。 相关问题-- 1. `onload`事件在JavaScript中是什么意思? 2. 为什么要使用`contentWindow`而不是直接获取`iframe`的height属性? 3. 如何处理跨域情况下iframe的`onload`事件?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值