如何让iframe框架和主页面共用一个滚动条(也称为:iframe高度自适应问题) 您所在的位置:网站首页 html共用一个页面 如何让iframe框架和主页面共用一个滚动条(也称为:iframe高度自适应问题)

如何让iframe框架和主页面共用一个滚动条(也称为:iframe高度自适应问题)

2024-06-22 18:38| 来源: 网络整理| 查看: 265

最近在前端页面遇到了一个问题,我在一个页面中利用iframe框架引入了一个页面进来,但是这个页面的高度是不叫高的,高出电脑屏幕很多,

所以就引发了iframe框架一个滚动条,然后主页面一个滚动条,这样页面就出现了两个滚动条。在网上查了好久,一直没有好的方法,直到我在

网上看到了iframe高度自适应,才解决了这个问题。

自适应的意思是,iframe框架的高度自动适应引入的HTML文件的内容高度,显在页面上的iframe的高度就是引入的文件的高度,这样就解决了公用一个滚动条的问题

js代码:

function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; } } }; window.onload = function () { setIframeHeight(document.getElementById('external-frame')); };

html代码:

参考网址:http://caibaojian.com/iframe-adjust-content-height.html(iframe高度自适应的6个方法)


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有