zoukankan      html  css  js  c++  java
  • 如何让iframe框架和主页面共用一个滚动条(也称为:iframe高度自适应问题)

    最近在前端页面遇到了一个问题,我在一个页面中利用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代码:
    <iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

    参考网址:http://caibaojian.com/iframe-adjust-content-height.html(iframe高度自适应的6个方法)
  • 相关阅读:
    thinkphp 前台输出
    php的四种定界符
    面试总结
    Git分布式版本控制工具
    Apache Dubbo
    Mybatis03
    Mybatis02
    Mybaitis01
    linux下如何安装webbench
    SpringUtil
  • 原文地址:https://www.cnblogs.com/BeenTogether/p/11325521.html
Copyright © 2011-2022 走看看