iframe框架嵌套页面(全屏,页面上下左右有空白,去双滚动条)

今天使用iframe框架,遇到了嵌套页面内容不全屏,页面上下左右有空白,出现双滚动条等情况,通过网上查阅,最终解决,在此做个记录。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的创意-我的创意记录</title>
    <style type="text/css">
        html{           /* 解决页面会出现双滚动条问题。overflow: hidden; 溢出隐藏,给一个元素中设置overflow: hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。 */
            overflow: hidden;
        }
        body{           /* 解决页面上下左右会出现空白问题。让外框的外边距和内边距都为0 */
            margin: 0;
            padding: 0;
        }
        #iframepage{
            width: 100%;
        }
    </style>
</head>
<body>
<iframe src="嵌入的页面链接" id="iframepage" scrolling="auto" onload="changeFrameHeight()" frameborder="0"></iframe>
<!-- 以下JS部分是让iframe自适应高度,兼容多种浏览器 -->
<script type="text/javascript">
    function changeFrameHeight(){
        var ifm= document.getElementById("iframepage");
        ifm.height=document.documentElement.clientHeight;
    }
    window.onresize=function(){
        changeFrameHeight();
    }
</script>
</body>
</html>

参考文章:

(1)https://www.bbsmax.com/A/1O5E8vRbJ7

(2)https://blog.csdn.net/alex8046/article/details/51456131

原文地址:https://www.cnblogs.com/opsprobe/p/12543466.html

时间: 2024-11-07 08:42:18

iframe框架嵌套页面(全屏,页面上下左右有空白,去双滚动条)的相关文章

H5页面内容较少时如何让页面全屏在手机显示呢

解决方案1: 设置如下:html,body{ min-height:100vh; background-color:#fff; }这样高度首先不会写死,而且满足最小高度是满屏 解决方案2: 可以用vh和vw来布局.100vh和100vw就是你设备的高度和宽度.先把外面盒子固定下来,所有的盒子的高度加起来等于100vh刚好占满一屏这样就不会有空白.像你这种盒子比较少的可以用js获取设备的高度和宽度,然后用js设置盒子的高度,加起来等于你设备的高度就可以了.字体大小用rem表示.相对于根字体的大小.

iframe框架嵌套技巧(全屏,去双滚动条)

一般情况下我们很少用到iframe(框架),但有些特殊的情况下我们不得不使用iframe,那么或许或遇到嵌套内容不全屏,网页周围有边框,双滚动条等等情况,下面来说一下处理技巧. 全屏与边框处理: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Colin-iframe Test</

mui页面全屏显示,页面覆盖手机顶部的信号栏电池栏,一般用于启动页和引导页

开启全屏 plus.navigator.setFullscreen(true); 关闭全屏 plus.navigator.setFullscreen(false); 没有找到可以单页面开启全屏的方法 这个开启全屏后整个项目都是全屏的了,有的时候只需要几个页面是全屏 我的想法是在需要开启全屏显示的页面的初始化里使用开启全屏,在换页面的跳转方法里关闭全屏,这样就可以实现需要的页面使用全屏 另外加一个可以控制顶部信息栏的方法 plus.navigator.setStatusBarStyle('dark

html页面全屏化显示

<html><head><script>// toggle full screen function toggleFullScreen() { if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current w

关于页面全屏化解决办法

效果: 点击按钮全屏 js : fullscreen(ele) { let element = document.getElementById(ele); let requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; console.log(requestMethod);

进入页面全屏和退出全屏代码

//全屏 var docElm = document.documentElement; //W3C if(docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if(docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } //Chrome等 else if(docElm.webkitRequestFullScreen) { docEl

设置页面全屏显示

在vue中使用screenfull全屏组件 // 安装 npm install screenfull --save-dev // 在需要使用全屏功能的组件中引入screenfull import screenfull from 'screenfull' // 使用 screenfull.toggle() 原文地址:https://www.cnblogs.com/Yancyzheng/p/11692249.html

02-让 framset 框架中的页面全屏显示

<script type="text/javascript"> window.onload=function(){ if(window.parent!=window){//如果是在框架中 //就让框架页面跳转到登录页面 window.parent.location.href="${pageContext.request.contextPath}/login.jsp"; } }; </script> 原文地址:https://www.cnblo

在 Xamarin.Forms 实现页面全屏显示

1 NavigationPage.SetHasNavigationBar(this, false); 或者 <ContentPage ... NavigationPage.HasNavigationBar="{Binding IsFullScreen}"></ContentPage>