获取Iframe的高度

应用场景:由于使用了jquery.smartwizard组件来做一个分步操作向导功能页面,整个步骤内容无法设置高度为100%或auto,会有步骤内容错乱,暂未知原因,只能设置固定值,但是会有一个问题,用户的PC的电脑屏幕大小和分辨率有可能是不一样的,如果我们定死了高度,则在不同大小的屏幕网页显示不会自适应高度,始终保持固定高度,显示不友好。

解决方案:获取iframe高度的同时减去其他内容高度占比,然后赋值给步骤内容高度即可,设置当网页大小发生变化同步刷新高度设置。

代码:(网页变化同步刷新高度设置+获取Iframe高度)

window.onresize = function () { //浏览器被重置大小时执行的操作
   setHeight();
}
function setHeight() {
    var bodyHight = document.body.clientHeight;   //body的css高度
    var htmtHight = document.documentElement.clientHeight;   //HTML的css高度
    console.log(hight, htmtHight);
    var x = document.getElementsByClassName('div-step-container');   //步骤内容高度
    var y = document.getElementById('task-content')    //包含步骤的主体高度
    for (var i = 0; i < x.length; i++) {
        x[i].style.height = (bodyHight - 109) + "px";   //整个iframe的高度减去(顶部步骤向导高度+底部栏高度)
        y.style.height = (bodyHight - 109) + "px";   //等同于上面
    }
}

 

在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`事件?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值