多层嵌套iframe如何去除滚动条

最新推荐文章于 2024-07-04 10:35:44 发布

x-cloud

最新推荐文章于 2024-07-04 10:35:44 发布

阅读量868

点赞数

文章标签： html5 html Powered by 金山文档

本文链接：https://blog.csdn.net/m0_37790484/article/details/129432693

版权

在前端开发中，为了解耦，经常使用多层iframe嵌套。当处理1920*1080分辨率的全屏图片显示时，遇到滚动条问题。文章提供了一种通过隐藏滚动条并设置iframe及父级元素尺寸实现全屏无滚动条的方法，并提醒开发者避免过度复杂化，简单实验更有效。

摘要由CSDN通过智能技术生成

我们在使用多层嵌套的iframe时，可能会遇到如下问题:

假设你的电脑分辨率为1920*1080,如果不是，可以将你的电脑分辨率调整到1920*1080,有一张图片恰好也是1920*1080,由于现在为前端比较流行，也是为了解耦，你可能需要使用iframe一层一层的嵌套,而这个图片需要显示在iframe的最底层，原因就是为了解耦，代码如下:

<template>
    <div>
        <iframe id="myDivKK" src="http://localhost:8080"></iframe>
    </div>
 </template>
 <script lang="ts" setup>
 import {onMounted,nextTick} from 'vue'
 import { Button } from 'kitty-ui-cloud'
  window.onload=()=>{
  }
 </script>
 <style>
    canvas{
        border: 1px solid red
    }
    body,html,div{
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
    }
    #myDivKK{
        width: 100%;
        height: 100%;
        border-width: 0px;
    }
 </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe id="myFrame" src="http://192.168.1.224:8081/"></iframe>
</body>
</html>
<style>
    #myFrame{
       width: 100%;
       height: 100%;   
       border-width:0px
    }
    body,html{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .myDiv{
        width: 100%;
        height: 100%;
    }
    body{
        margin: 0px;
    }
</style>

1、最外层页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="content"></div>
</body>
</html>
<style>
    body{
        padding: 0px;
        margin: 0px;
    }
  .content{
     width: 1920px;
     height:1080px;
     background-color: aqua;
  }
</style>

如上代码所示, 需要把外面两层html的滚动条隐藏掉，然后100%全屏就不会再出现滚动条了，同学们有遇到过这个问题吗，欢迎评论区留言讨论，反正我是被坑了，多用简单的也是做实验才是真理呀